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')(['responsive'])]
}If you don't need the responsive versions, you can pass in an empty array.
You can also include other supported variants. For the full list of available variants, see https://tailwindcss.com/docs/configuring-variants.
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:
-
colorchanges 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. -
opacityBoostis 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.