tailwindcss-box-shadow
v2.0.3
Published
Tailwind CSS plugin that generates box-shadow utility values exactly as they're defined in the config.
Downloads
24,258
Maintainers
Readme
Deprecation notice
This plugin has been archived and is no longer maintained.
Use tailwindcss-preset-email
instead, which includes this plugin and others, and is actively maintained.
This is a Tailwind CSS plugin that generates shadow
utilities exactly as they are defined in the config - that is, without CSS variables.
Installation
Install the plugin from NPM:
npm install -D 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)',
}
}
},
}
Core plugins
In order to work, the plugin disables the following core Tailwind CSS plugins:
- boxShadow
- boxShadowColor