Package Exports

tailwindcss-opacity

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-opacity) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 that.

Provides easy generation of opacity classNames through the tailwind.config.js setup for use on color, borderColor, and backgroundColor attributes complementing your TailwindCSS theme('colors') configuration.

2.x.x User Facing Changes

(non-breaking) control property on config object is optional. View Example Config below to see potential usage.

Usage

1. Installation

npm i --save tailwindcss-opacity

2. Example 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

3. Example config in tailwind.config.js

a. Configuration Types

config: {
  opacities: number[]
  variants: ('hover' | 'focus' | 'active' | 'visited' | 'disabled')[]
  control?: {
    excludedAttributes?: ('color' | 'borderColor' | 'backgroundColor')[]
  }
}

b. Example Configuration

{
  plugins: [
    require('tailwindcss-opacity')({
      opacities: [0.1, 0.2, 0.4, 0.65, 0.85], // Opacities applied to theme('colors')
      variants: ['hover', 'focus', 'active', 'visited', 'disabled'], // Variants to apply opacities to
      control: {
        excludedAttributes: ['borderColor'], // Exclude borderColor from generation
      },
    }),
  ]
}

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

Credits

Author: Daniel Griffiths
Role: Founder and Engineer