{"id":13480380,"url":"https://github.com/soueuls/tailwind-color-alpha","last_synced_at":"2025-04-10T12:41:30.033Z","repository":{"id":65514108,"uuid":"245529335","full_name":"soueuls/tailwind-color-alpha","owner":"soueuls","description":"Automatic alpha variants for your Tailwind CSS colors based on your opacity config","archived":false,"fork":false,"pushed_at":"2020-04-07T01:06:01.000Z","size":6,"stargazers_count":21,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T11:21:44.989Z","etag":null,"topics":["css","rgba","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/soueuls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-06T22:38:54.000Z","updated_at":"2023-09-22T18:41:18.000Z","dependencies_parsed_at":"2023-01-26T21:01:19.704Z","dependency_job_id":null,"html_url":"https://github.com/soueuls/tailwind-color-alpha","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/soueuls%2Ftailwind-color-alpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soueuls%2Ftailwind-color-alpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soueuls%2Ftailwind-color-alpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soueuls%2Ftailwind-color-alpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soueuls","download_url":"https://codeload.github.com/soueuls/tailwind-color-alpha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838419,"owners_count":21004575,"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":["css","rgba","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:38.235Z","updated_at":"2025-04-10T12:41:30.011Z","avatar_url":"https://github.com/soueuls.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":[],"readme":"\u003e Automatic alpha variants for your Tailwind CSS colors based on your opacity config\n\n## Why?\n\nTailwind only supports opacity but sometimes you need to apply semi-transparent background/border or text.\n\nYou could tweak your Tailwind configuration like this\n\n```javascript\nmodule.exports = {\n  theme: {\n    colors: {\n      primary: \"#2b2e4a\",\n      \"primary-10\": \"rgba(43,46,74, 0.1)\",\n      \"primary-20\": \"rgba(43,46,74, 0.2)\",\n      \"primary-75\": \"rgba(43,46,74, 0.75)\",\n      // ...\n    },\n    // ...\n  },\n};\n```\n\nBut it's repetitive, confusing and error prone. We can do better.\n\n## Install\n\n`npm install --save-dev tailwind-color-alpha`\n\n```javascript\nmodule.exports = {\n  // ...\n  plugins: [require(\"tailwind-color-alpha\")()],\n};\n```\n\nThe plugin will automatically use your colors and opacity config to generate all the corresponding rgba values for your text, background, border, fill and stroke utility classes respecting your variant settings for each.\n\n## Examples\n\n```javascript\nmodule.exports = {\n  theme: {\n    colors: {\n      primary: \"#2b2e4a\",\n    },\n    opacity: {\n      \"25\": \".25\",\n      \"50\": \"0.5\",\n    },\n  },\n};\n```\n\nThe configuration above yields the following utilities:\n\n```css\n.bg-primary-alpha-25 {\n  background-color: rgba(43, 46, 74, 0.25);\n}\n.bg-primary-alpha-50 {\n  background-color: rgba(43, 46, 74, 0.5);\n}\n.text-primary-alpha-25 {\n  color: rgba(43, 46, 74, 0.25);\n}\n.text-primary-alpha-50 {\n  color: rgba(43, 46, 74, 0.5);\n}\n.border-primary-alpha-25 {\n  border-color: rgba(43, 46, 74, 0.25);\n}\n.border-primary-alpha-25 {\n  border-color: rgba(43, 46, 74, 0.5);\n}\n.hover\\:text-primary-alpha-25:hover {\n  color: rgba(43, 46, 74, 0.25);\n}\n.focus\\:text-primary-alpha-50:focus {\n  color: rgba(43, 46, 74, 0.5);\n}\n\n/* and more... */\n```\n\nNotice that a color named `red.default` will end up generating `text-red` and so we follow Tailwind's convention with `bg-red-alpha-${opacity}`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoueuls%2Ftailwind-color-alpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoueuls%2Ftailwind-color-alpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoueuls%2Ftailwind-color-alpha/lists"}