# 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](https://maizzle.com) that don't rely on the new CSS variables strategy in Tailwind CSS 2.x.

## Installation

Install the plugin from npm:

```sh
# 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:

```js
// 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:

```html
<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:

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