Note: This is a fork from jonaskay's tailwindcss-elevation plugin which supports recent versions of Tailwind CSS. More information regarding its configuration is available below.
Add 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:
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 a config object:
module.exports = {
plugins: [
require('tailwindcss-elevation')(
[],
{
color: '77,192,181',
opacityBoost: '0.23'
}
)
]
}
Config object accepts 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.
<button class="elevation-2">Button</button>
The z values range from 0 to 24.
You can find the changelog of the tailwindcss-elevation
package here.