TailwindCSS Opacity Plugin
Contribution to the TailwindCSS community and product.
Currently TailwindCSS only offers opacity at the element level, not the attribute level.
This plugin provides granular, or optionally basic control over RGBA/"opacity" at the attribute level to complement your TailwindCSS theme('colors')
.
The optional basic control uses theme('opacity')
values.
Features
-
Simple option to generate RGBA attributes based solely on
theme('colors')
andtheme('opacity')
-
Granular control through config so that your generated file doesn't explode with unused classes
- Opacity Opt-In
pluginConfig.opacities: number[]
- Variant Opt-In
pluginConfig.variants: string[]
- Attribute Opt-Out
pluginConfig.excludedAttributes: string[]
- Opacity Opt-In
-
Handles
theme('colors')
recursively -
RGBA available on all color defining CSS attributes
- Property:
color
, Prefix:text
- Property:
backgroundColor
, Prefix:bg
- Property:
borderColor
, Prefix:border
- Property:
borderTopColor
, Prefix:border-t
- Property:
borderRightColor
, Prefix:border-r
- Property:
borderBottomColor
, Prefix:border-b
- Property:
borderLeftColor
, Prefix:border-l
- Property:
stroke
, Prefix:stroke
- Property:
fill
, Prefix:fill
- Property:
-
Unreleased 3.0.0 Color specific control for super granularity.
2.x.x User Facing Changes
- (non-breaking)
excludedAttributes
property on config object is optional. View examples below to see potential usage. - (non-breaking)
deepControl
property on config object is optional. View examples below to see potential usage.
Usage
1. Installation
npm i --save tailwindcss-opacity
2. Explaination of Generated Classnames
-
.text-blue-100
text
= color attributeblue
=theme('colors')
,{ colors: { blue: '#XXXXXX' } }
100
= 0.1 opacity
-
.border-blue-1-450
border
= border-color attribute1-blue
=theme('colors')
,{ colors: { blue: { 1: '#XXXXXX' } } }
450
= 0.45 opacity
-
.bg-light-blue-200
bg
= background-color attributelight-blue
=theme('colors')
,{ colors: { light: { blue: '#XXXXXX' } } }
200
= 0.2 opacity
3. Example Generation
4. Example config in tailwind.config.js
a. Configuration Types
config: pluginConfig?:
b. Example Configuration
/** * Only use theme('colors') and theme('opacity') */ plugins: /** * Config for more granular control */ plugins: opacities: 01 02 04 065 085 // Opacities applied to theme('colors') variants: 'hover' 'active' 'disabled' // Variants to apply opacities to excludedAttributes: 'borderColor' // Exclude borderColor from generation
History
1.0.0
Npm Module, Open Source, published2.0.0
Integrate Typescript2.0.0
Add excludable attributes2.0.1
Example generated classNames added to readme2.0.1
Beginning unit testing with Jest and Typescript2.0.2
Completed unit tests for utils.ts2.1.1
Added simple generation based ontheme('opacity')
as an option
Credits
- Company: ©2019 The Launch
- Author: Daniel Griffiths
- Role: Founder and Engineer
- Project: ©2020 TailwindCSS Opacity (contribution to TailwindCSS community)