CODEWITHSUNDEEP
csstailwind-css
vinicius-bortoletto
vinicius-bortoletto

Reputation: 319

TailwindCSS: Can't use breakpoints for box-shadow

I'm trying TailwindCSS for the first time, and it seems I can't use breakpoints for box-shadows. All the others breakpoints are working fine except for the box-shadow.

Btw, I'm using a custom box-shadow.

HTML:

<div 
   class="w-auto h-screen pl-10 mt-20 pt-12 absolute left-0 top-0 bg-gray-900 shadow-menu md:shadow-none"
>

tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {},
  plugins: []
};

Upvotes: 2

Views: 1184

Answers (1)

Ben
Ben

Reputation: 2235

You have to enable Pseudo-Class Variants for boxShadow in your tailwind.config.js like this:

boxShadow: ['responsive', 'hover', 'focus']

This will allow you to tweak boxShadow based on responsive classes, hover or focus.

Your tailwind.config.js will look like this:

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {
    boxShadow: ['responsive', 'hover', 'focus']
  },
  plugins: []
};

I hope this helps.

Resources https://tailwindcss.com/docs/pseudo-class-variants/#app

Upvotes: 2

Related Questions