tailwindcss-elevation

tailwindcss-elevation

Add Material Components elevation classes to your Tailwind CSS project. Check out the demo!

Installation

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. The full list of available variants is:

• responsive
• hover
• focus
• active
• group-hover
• focus-within

To learn more about configuring your Tailwind CSS installation, see https://tailwindcss.com/docs/configuration.

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
• opacityBoost is added to the default box-shadow opacity and accepts a number between 0.0 and 1.0

Basic usage

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.

Material documentation

• Material Design: Elevation
• Material Components for the web