A plugin that generates shadow
utilities exactly as they are defined in the config - that is, without CSS variables.
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'),
],
}
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);
+ }
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)',
}
}
},
}
Author: maizzle
Source: https://github.com/maizzle/tailwindcss-box-shadow
License: MIT license