{"id":26944622,"url":"https://github.com/the-launch-tech/tailwindcss-opacity","last_synced_at":"2025-04-02T18:17:39.654Z","repository":{"id":65514225,"uuid":"241768164","full_name":"the-launch-tech/tailwindcss-opacity","owner":"the-launch-tech","description":"NPM Package and plugin for TailwindCSS. Provides attribute-level opacity/alpha with granular control. @ https://www.npmjs.com/package/tailwindcss-opacity","archived":false,"fork":false,"pushed_at":"2020-06-22T01:28:13.000Z","size":36,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T22:06:23.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-opacity","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-launch-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-20T01:42:42.000Z","updated_at":"2020-06-22T01:28:15.000Z","dependencies_parsed_at":"2023-01-26T20:55:23.805Z","dependency_job_id":null,"html_url":"https://github.com/the-launch-tech/tailwindcss-opacity","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-launch-tech%2Ftailwindcss-opacity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-launch-tech%2Ftailwindcss-opacity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-launch-tech%2Ftailwindcss-opacity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-launch-tech%2Ftailwindcss-opacity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-launch-tech","download_url":"https://codeload.github.com/the-launch-tech/tailwindcss-opacity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246850723,"owners_count":20844135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-02T18:17:39.076Z","updated_at":"2025-04-02T18:17:39.646Z","avatar_url":"https://github.com/the-launch-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TailwindCSS Opacity Plugin\n\n### Contribution to the TailwindCSS community and product.\n\nCurrently TailwindCSS only offers opacity at the element level, not the attribute level.\n\nThis plugin provides granular, or optionally basic control over RGBA/\"opacity\" at the attribute level to complement your TailwindCSS `theme('colors')`.\n\nThe optional basic control uses `theme('opacity')` values.\n\n### Features\n\n- Simple option to generate RGBA attributes based solely on `theme('colors')` and `theme('opacity')`\n\n- Granular control through config so that your generated file doesn't explode with unused classes\n\n  - Opacity Opt-In `pluginConfig.opacities: number[]`\n  - Variant Opt-In `pluginConfig.variants: string[]`\n  - Attribute Opt-Out `pluginConfig.excludedAttributes: string[]`\n\n- Handles `theme('colors')` recursively\n\n- RGBA available on all color defining CSS attributes\n\n  1. Property: `color`, Prefix: `text`\n  2. Property: `backgroundColor`, Prefix: `bg`\n  3. Property: `borderColor`, Prefix: `border`\n  4. Property: `borderTopColor`, Prefix: `border-t`\n  5. Property: `borderRightColor`, Prefix: `border-r`\n  6. Property: `borderBottomColor`, Prefix: `border-b`\n  7. Property: `borderLeftColor`, Prefix: `border-l`\n  8. Property: `stroke`, Prefix: `stroke`\n  9. Property: `fill`, Prefix: `fill`\n\n- _Unreleased 3.0.0_ Color specific control for super granularity.\n\n---\n\n## 2.x.x User Facing Changes\n\n1. (non-breaking) `excludedAttributes` property on config object is optional. View examples below to see potential usage.\n2. (non-breaking) `deepControl` property on config object is optional. View examples below to see potential usage.\n\n---\n\n## Usage\n\n### 1. Installation\n\n- `npm i --save tailwindcss-opacity`\n\n---\n\n### 2. Explaination of Generated Classnames\n\n- `.text-blue-100`\n\n  - `text` = color attribute\n  - `blue` = `theme('colors')`, `{ colors: { blue: '#XXXXXX' } }`\n  - `100` = 0.1 opacity\n\n- `.border-blue-1-450`\n\n  - `border` = border-color attribute\n  - `1-blue` = `theme('colors')`, `{ colors: { blue: { 1: '#XXXXXX' } } }`\n  - `450` = 0.45 opacity\n\n- `.bg-light-blue-200`\n\n  - `bg` = background-color attribute\n  - `light-blue` = `theme('colors')`, `{ colors: { light: { blue: '#XXXXXX' } } }`\n  - `200` = 0.2 opacity\n\n---\n\n### 3. Example Generation\n\n```css\n.text-yellow-850 {\n  color: rgba(..., 0.85);\n}\n\n.border-r-yellow-200 {\n  background-color: rgba(..., 0.2);\n}\n\n.bg-yellow-400 {\n  background-color: rgba(..., 0.4);\n}\n\n.text-red-0-850 {\n  color: rgba(..., 0.85);\n}\n\n.text-red-3-850 {\n  color: rgba(..., 0.85);\n}\n\n.bg-red-4-400 {\n  background-color: rgba(..., 0.4);\n}\n\n.text-green-0-850 {\n  color: rgba(..., 0.85);\n}\n\n.bg-blue-4-650 {\n  background-color: rgba(..., 0.65);\n}\n```\n\n---\n\n### 4. Example config in tailwind.config.js\n\n##### a. Configuration Types\n\n```typescript\nconfig: {\n  ...\n  colors: {\n    [colorKey: string | number]: string\n  },\n  opacity?: number[]                // Optional for simple generation\n  ...\n}\n\npluginConfig?: {                    // Alternative config for granular control\n  opacities?: number[]\n  variants?: string[]\n  excludedAttributes?: string[]\n}\n```\n\n---\n\n##### b. Example Configuration\n\n```javascript\n/**\n * Only use theme('colors') and theme('opacity')\n */\n{\n  plugins: [require('tailwindcss-opacity')()]\n}\n\n/**\n * Config for more granular control\n */\n{\n  plugins: [\n    require('tailwindcss-opacity')({\n      opacities: [0.1, 0.2, 0.4, 0.65, 0.85], // Opacities applied to theme('colors')\n      variants: ['hover', 'active', 'disabled'], // Variants to apply opacities to\n      excludedAttributes: ['borderColor'], // Exclude borderColor from generation\n    }),\n  ]\n}\n```\n\n---\n\n## History\n\n- `1.0.0` Npm Module, Open Source, published\n- `2.0.0` Integrate Typescript\n- `2.0.0` Add excludable attributes\n- `2.0.1` Example generated classNames added to readme\n- `2.0.1` Beginning unit testing with Jest and Typescript\n- `2.0.2` Completed unit tests for utils.ts\n- `2.1.1` Added simple generation based on `theme('opacity')` as an option\n\n---\n\n## Credits\n\n- Company: ©2019 The Launch\n- Author: Daniel Griffiths\n- Role: Founder and Engineer\n- Project: ©2020 TailwindCSS Opacity (contribution to TailwindCSS community)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-launch-tech%2Ftailwindcss-opacity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-launch-tech%2Ftailwindcss-opacity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-launch-tech%2Ftailwindcss-opacity/lists"}