Tailwind CSS plugin for Material Components elevation classes.
npm install tailwindcss-elevationAdd Material Components elevation classes to your Tailwind CSS project. Check out the demo!
To install the package, run
npm install tailwindcss-elevation
To activate the plugin, add a tailwind.config.js file to the root of your project:
``javascript`
module.exports = {
plugins: [
require('tailwindcss-elevation'),
]
}
To learn more about configuring your Tailwind CSS installation, see https://tailwindcss.com/docs/configuration.
To change the default configurations, you can include an options object:
`javascript`
module.exports = {
plugins: [
require('tailwindcss-elevation')(
{
color: '77,192,181',
opacityBoost: '0.23'
}
)
]
}
Options accept the following properties:
* color changes the default box-shadow base color and accepts an RGB (e.g. '77,192,181') or HEX triplet (e.g. '#4dc0b5') as its value. When using a CSS custom property (variable) as the value, you have to use an RGB triplet.opacityBoost
* is added to the default box-shadow opacity and accepts a number between 0.0 and 1.0
You can apply elevation to an element using the .elevation-{z-value} utilities.
`html``
The z values range from 0 to 24.