tailwindcss-box-shadow

tailwindcss-box-shadow

A plugin that generates shadow utilities exactly as you have them defined in your theme config, without CSS variables.

But... why?

I needed shadow utilities in Maizzle that don't rely on the new CSS variables strategy in Tailwind CSS 2.x.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-box-shadow

# Using Yarn
yarn add tailwindcss-box-shadow

Then add the plugin to your tailwind.config.js file, making sure to disable the default boxShadow plugin:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    boxShadow: false,
  },
  plugins: [
    require('tailwindcss-box-shadow'),
    // ...
  ],
}

Usage

Use the shadow-{n} utilities to add box shadows to elements:

<div class="shadow-xl">
  Fugiat id id enim commodo.
</div>

Configuration

You can configure which values and variants are generated by this plugin under the boxShadow key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        button: '0 3px 9px 0 rgba(0, 0, 0, 0.09)',
      }
    }
  },
  variants: {
    boxShadow: ['responsive', 'hover']
  }
}