tailwindcss-elevation

March 1, 2023 ยท View on GitHub

Build Status Test Coverage

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'),
  ]
}

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

Configuration

To change the default configurations, you can include an options object:

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

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.

Changelog

You can find the changelog of the tailwindcss-elevation package here.

Material documentation