https://github.com/adfdev/tailwindcss-bg-alpha
Tailwind CSS alpha support for background, text and border
https://github.com/adfdev/tailwindcss-bg-alpha
tailwindcss tailwindcss-plugin
Last synced: 3 months ago
JSON representation
Tailwind CSS alpha support for background, text and border
- Host: GitHub
- URL: https://github.com/adfdev/tailwindcss-bg-alpha
- Owner: adfdev
- License: gpl-3.0
- Archived: true
- Created: 2019-09-14T12:20:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-31T18:46:51.000Z (almost 5 years ago)
- Last Synced: 2024-09-26T16:31:21.605Z (over 1 year ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 765 KB
- Stars: 21
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS BG Alpha Plugin
Utility for adding background, border and text colors alpha.
## Requirements
* [Tailwind CSS](https://tailwindcss.com/) >= v1.0.0
## Installation
Install via NPM:
``` sh
npm i --save-dev tailwindcss-bg-alpha
```
Install via YARN:
``` sh
yarn add tailwindcss-bg-alpha
```
## Usage
``` js
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-bg-alpha')(),
]
// ...
}
```
This plugin generates the following utilities:
``` css
.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
``` js
// 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
``` js
// 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](https://github.com/adfdev/tailwindcss-bg-alpha/blob/master/LICENSE).