Skip to content
Tailwind CSS alpha support for background color
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package-lock.json
package.json
test.js

README.md

Tailwind CSS BG Alpha Plugin

Package Version

Package Total Downloads

Utility for adding background, border and text colors alpha.

Requirements

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.

You can’t perform that action at this time.