Skip to content
Tailwind CSS plugin for Material Components elevation classes
Branch: master
Clone or download
Latest commit 99f5287 May 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Handle invalid opacity boost values May 11, 2019
test Handle invalid opacity boost values May 11, 2019
.gitignore
.travis.yml Add .travis.yml Mar 19, 2019
CHANGELOG.md Update CHANGELOG May 11, 2019
README.md
index.js Prevent users from giving invalid color values Apr 17, 2019
package.json Bump version May 11, 2019
yarn.lock Add a test case for tailwind's build command Mar 29, 2019

README.md

tailwindcss-elevation

Build Status

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, modify your Tailwind CSS config file:

// ...

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

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

You can’t perform that action at this time.