/tailwindcss-elevation

Tailwind CSS plugin for Material Components elevation classes

Primary LanguageJavaScript

tailwindcss-elevation

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.

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 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

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