tailwindcss-opacity weekly downloads statistics

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') and theme('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[] • Handles theme('colors') recursively • RGBA available on all color defining CSS attributes

1. Property: color, Prefix: text 2. Property: backgroundColor, Prefix: bg 3. Property: borderColor, Prefix: border 4. Property: borderTopColor, Prefix: border-t 5. Property: borderRightColor, Prefix: border-r 6. Property: borderBottomColor, Prefix: border-b 7. Property: borderLeftColor, Prefix: border-l 8. Property: stroke, Prefix: stroke 9. Property: fill, Prefix: fill

• Unreleased 3.0.0 Color specific control for super granularity.

2.x.x User Facing Changes

1. (non-breaking) excludedAttributes property on config object is optional. View examples below to see potential usage. 2. (non-breaking) deepControl property on config object is optional. View examples below to see potential usage.

Usage

1. Installation

• npm i --save tailwindcss-opacity

1. Explaination of Generated Classnames

• .text-blue-100 • text = color attribute • blue = theme('colors'), { colors: { blue: '#XXXXXX' } } • 100 = 0.1 opacity • .border-blue-1-450 • border = border-color attribute • 1-blue = theme('colors'), { colors: { blue: { 1: '#XXXXXX' } } } • 450 = 0.45 opacity • .bg-light-blue-200 • bg = background-color attribute • light-blue = theme('colors'), { colors: { light: { blue: '#XXXXXX' } } } • 200 = 0.2 opacity

1. Example Generation

2. Example config in tailwind.config.js

a. Configuration Types

b. Example Configuration

History

• 1.0.0 Npm Module, Open Source, published • 2.0.0 Integrate Typescript • 2.0.0 Add excludable attributes • 2.0.1 Example generated classNames added to readme • 2.0.1 Beginning unit testing with Jest and Typescript • 2.0.2 Completed unit tests for utils.ts • 2.1.1 Added simple generation based on theme('opacity') as an option

Credits

• Company: ©2019 The Launch • Author: Daniel Griffiths • Role: Founder and Engineer • Project: ©2020 TailwindCSS Opacity (contribution to TailwindCSS community)