tailwindcss-box-shadow

tailwindcss-box-shadow

A plugin that generates shadow utilities exactly as they are defined in the config - that is, without CSS variables.

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:

module.exports = {
  plugins: [
    require('tailwindcss-box-shadow'),
  ],
}

Usage

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

<div class="shadow-2xl">
  Box with big ass shadow
</div>

The plugin will generate the box-shadow utility exactly as defined in the Tailwind config, without --tw-shadow-* CSS variables:

- .shadow-xl {
-   --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
- }
+ .shadow-xl {
+   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+ }

Configuration

You may configure which utilities are generated by this plugin under the boxShadow key in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        button: '0 3px 9px 0 rgba(0, 0, 0, 0.09)',
      }
    }
  },
}