{"id":23514936,"url":"https://github.com/markusantonwolf/tailwind-css-plugin-custom-color-palette","last_synced_at":"2025-04-19T14:53:22.160Z","repository":{"id":140533823,"uuid":"330568859","full_name":"markusantonwolf/tailwind-css-plugin-custom-color-palette","owner":"markusantonwolf","description":"This plugin generates all variants and utilities from your customized color palette. ","archived":false,"fork":false,"pushed_at":"2022-01-26T20:40:57.000Z","size":1279,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T06:47:50.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/markusantonwolf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-01-18T05:56:05.000Z","updated_at":"2024-06-26T13:58:38.000Z","dependencies_parsed_at":"2023-12-19T05:55:10.929Z","dependency_job_id":"22561877-3295-443c-992d-2a588f30cf4e","html_url":"https://github.com/markusantonwolf/tailwind-css-plugin-custom-color-palette","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.2666666666666667,"last_synced_commit":"478114afe65615fe0bac1708e080e3ea7c7d2269"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-custom-color-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-custom-color-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-custom-color-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-custom-color-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markusantonwolf","download_url":"https://codeload.github.com/markusantonwolf/tailwind-css-plugin-custom-color-palette/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249718308,"owners_count":21315083,"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":"2024-12-25T14:11:52.837Z","updated_at":"2025-04-19T14:53:22.143Z","avatar_url":"https://github.com/markusantonwolf.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS Custom Color Palette\n\n**This Plugin generates a color palette and all utilities based on your custom colors. New utilities like `text-yourColor-100` or `bg-yourColor-600` will be rendered for your custom colors.**\n\n**Compatibility: Tailwind CSS ^1.8.3 and ^2.X.**\n\n## Installation\n\n### 1. Install the Tailwind CSS Custom Color Palette plugin:\n\n```bash\n# Install using npm\nnpm install --save-dev @markusantonwolf/tailwind-css-plugin-custom-color-palette\n\n# Install using yarn\nyarn add -D @markusantonwolf/tailwind-css-plugin-custom-color-palette\n```\n\n### 2. Add it to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    theme: {\n        customColorPalette: {\n            colors: {\n                teal: \"#408075\", // add more colors to the plugin\n            },\n        },\n    }\n    // ...\n    plugins: [\n        require(\"@markusantonwolf/tailwind-css-plugin-custom-color-palette\"),\n    ],\n};\n```\n\n### 3. Use it \u003e 🌮\n\n## Usage\n\nThe Tailwind CSS Custom Color Palette plugin generates new utilities like `.bg-yourColor-400`, `.text-yourColor-200` or `.border-yourColor-700` based on your defined colors. Every color you defined will be used as -500 variante in the palette.\n\n### Examples\n\n```html\n\u003ch1 class=\"text-yourColor-600\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/h1\u003e\n```\n\n```html\n\u003cdiv class=\"bg-yourColor-200 p-8 border-2 border-yourColor-700 border-dashed\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"bg-gradient-to-b from-yourColor-100 to-yourColor-200\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\n**You can find a list of all generated utilities based on the default settings here - [Custom Color utilities](https://github.com/markusantonwolf/tailwind-css-plugin-custom-color-palette/blob/master/dist/custom-color-palette.css)**\n\n### Configuration\n\nIn the following example you can see all available options (default values) for the Custom Color Palette plugin. To add your own configuration add ```customColorPalette```to ```theme```and ```variants```. Your new settings will be merged with the default settings. To change the plugin behaviour in terms of how it adds the new classes as utilities you can add these options as objects to the default function.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    theme: {\n        // ...\n        customColorPalette: {\n            colors: {\n                teal: \"#408075\", // add more colors to the plugin\n            },\n            utilities: {\n                textColor: true, // render text color utilities: true (default) | false\n                backgroundColor: true, // render background color utilities: true (default) | false\n                borderColor: true, // render border color utilities: true (default) | false\n                gradientColorStops: true, // render gradient color utilities: true (default) | false\n                placeholderColor: true, // render placeholder color utilities: true (default) | false\n                divideColor: true, // render divide color utilities: true (default) | false\n                ringColor: true, // render ring color utilities: true (default) | false\n                ringOffsetColor: true, // render ring offset color utilities: true (default) | false\n            },\n            steps: 100, // define the steps between each shade: 100 (default) | 50\n            calculation: \"relative\", // change color calculation: relative (default) | linear\n        },\n        // ...\n    },\n    variants: {\n        // ...\n        customColorPalette: [\"responsive\", \"hover\", \"active\", \"focus\"],\n        // ...\n    },\n    plugins: [\n        require(\"@markusantonwolf/ta-youtube\")({\n            respectPrefix: true, // respect prefix option in config: true (default) | false \n            respectImportant: true, // respect important option in config: true (default) | false \n        }),\n    ],\n    // ...\n};\n```\n\nYou can find all available variants in the Tailwind CSS documentation: [Tailwind CSS - Configuring Variants](https://tailwindcss.com/docs/configuring-variants).\n\n## Licence\n\nTailwind CSS Plugin Filter utilities is released under the [MIT license](https://github.com/markusantonwolf/tailwind-css-plugin-custom-color-palette/blob/master/licence.md) \u0026 supports modern environments.\n\n## Copyright\n\n© 2020 Markus A. Wolf\n\u003chttps://www.markusantonwolf.com/en\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-custom-color-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-custom-color-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-custom-color-palette/lists"}