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

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.

Material documentation

• Material Design: Elevation
• Material Components for the web

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

Changed

• Update tailwindcss version
• Move to tailwindcss/plugin

Security

• Update dependencies to fix security vulnerabilities

[1.0.1] - 2020-12-06

Fixed

• Add README and CHANGELOG to package

[1.0.0] - 2020-12-06

Changed

• Add tailwindcss to peer dependencies
• Update tailwindcss version
• Remove test files from the package

Security

• Update dependencies to fix security vulnerabilities

[0.3.5] - 2020-08-08

Security

• Update dependencies to fix security vulnerabilities

[0.3.4] - 2020-04-03

Security

• Update dependencies to fix security vulnerabilities

[0.3.3] - 2019-09-04

Fixed

• Allow CSS custom properties for color config

[0.3.2] - 2019-08-20

Changed

• Allow HEX values for color config

[0.3.1] - 2019-07-13

Changed

• Update tailwindcss version

Security

• Update dependencies to fix security vulnerabilities

[0.3.0] - 2019-05-11

Added

• Opacity config

[0.2.0] - 2019-04-17

Added

• Color config

[0.1.1] - 2019-03-29

Fixed

• Removed extra ; after CSS rule declarations

[0.1.0] - 2019-03-19

Added

• Utility classes for elevation