Package Exports

tailwindcss-bg-alpha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-bg-alpha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind CSS BG Alpha Plugin

Package Version

Package Total Downloads

Utility for adding background, border and text colors alpha.

Requirements

Tailwind CSS >= v1.0.0

Installation

Install via NPM:

npm i --save-dev tailwindcss-bg-alpha

Install via YARN:

yarn add tailwindcss-bg-alpha

Usage

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('tailwindcss-bg-alpha')(),
    ]
    // ...
}

This plugin generates the following utilities:

.bg-white-alpha-80 {
    background-color: rgba(255, 255, 255, 0.8)
}

.border-black-alpha-20 {
    border-color: rgba(255, 255, 255, 0.2)
}

.text-customcolor-alpha-100 {
    color: rgba(255, 255, 255, 1)
}

Utilities generated are: bg, border and text
Ranges value for alpha: 0 to 100
Default colors are: white and black

Custom colors

// tailwind.config.js
module.exports = {
    // ...
    alphaColors: ['red.500', 'gray.200', 'yourcustomcolor.500']
    // ...
}

important use . for separate color name (e.g. red) to color variant (e.g. 500)

Custom values

// tailwind.config.js
module.exports = {
    // ...
    alphaValues: [0.12, 0.74, 0.87]
    // ...
}

important use . for separate decimal (e.g. 0.12). Range 0 to 1

License

Tailwind BG Alpha provided under the MIT License.