Skip to content
This repository has been archived by the owner. It is now read-only.

adfdev/tailwindcss-bg-alpha

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Tailwind CSS alpha support for background, text and border

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published