https://github.com/jonaskay/tailwindcss-elevation

Tailwind CSS plugin for Material Components elevation classes
https://github.com/jonaskay/tailwindcss-elevation

Last synced: 13 days ago
JSON representation

Tailwind CSS plugin for Material Components elevation classes

• Host: GitHub
• URL: https://github.com/jonaskay/tailwindcss-elevation
• Owner: jonaskay
• Created: 2019-03-19T19:02:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-22T13:57:01.000Z (over 1 year ago)
• Last Synced: 2024-09-28T10:17:36.928Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-elevation
• Size: 1.83 MB
• Stars: 166
• Watchers: 1
• Forks: 7
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-tailwindcss - Elevation - Adds [Material UI `elevation`](https://material.io/design/environment/elevation.html) utilities. (Plugins)

README

        
# tailwindcss-elevation

[![Build Status](https://travis-ci.com/jonaskay/tailwindcss-elevation.svg?branch=master)](https://travis-ci.com/jonaskay/tailwindcss-elevation) [![Test Coverage](https://api.codeclimate.com/v1/badges/0c8c89a338155da523e7/test_coverage)](https://codeclimate.com/github/jonaskay/tailwindcss-elevation/test_coverage)

Add Material Components elevation classes to your [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/) project. Check out the [demo](https://jonaskay.github.io/tailwindcss-elevation/)!

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

```javascript

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:

```javascript

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.

```html

Button

```

The z values range from 0 to 24.

## Changelog

You can find the changelog of the `tailwindcss-elevation` package [here](/tailwindcss-elevation/CHANGELOG.md).

## Material documentation

* [Material Design: Elevation](https://material.io/design/environment/elevation.html)

* [Material Components for the web](https://material.io/develop/web/)