Elevation style in Google Material Design for TailwindCSS
Install plugin
npm install tailwindcss-elevation-plugin
Import plugin to tailwind.config.js
module.exports = {
// Other configuration
plugins: [require('tailwindcss-elevation-plugin')],
};
After that you can use it like this
<h1 class="elevation-1">Hello World</h1>
<h1 class="elevation-1-dark">Hello World</h1>
module.exports = {
// Other configuration
elevation: {
6: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)'
}
plugins: [require('tailwindcss-elevation-plugin')],
};
If in css it will be like this
.elevation-6 {
box-shadow: px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}