PluginStatstailwindcss-css-variables-color-palette-plugin weekly downloads statistics
By niqingyang · npm · Tailwind plugins
Color Palette plugin using CSS variables for TailwindCSS; forked from tailwindcss-css-variables-palette-plugin
tailwindcss-css-variables-color-palette-plugin has 6 recorded weekly downloads on npm, a decrease of 57.1% over the past 30 days.
It ranks #2008 of 2,251 tracked npm listings by weekly downloads.
Over 90 days, weekly downloads changed by +20.0%.
PluginStats has 121 daily observations since Jun 19, 2026; the latest is from Oct 17, 2026.
About tailwindcss-css-variables-color-palette-plugin
Palette plugin using CSS variables for TailwindCSS
基于 https://github.com/Thisisjuke/tailwindcss-css-variables-palette-plugin 和 https://github.com/hd996/color-generate 两个库整合了一下，支持生成 antd3 的色彩
Adds a color palette (from 50 to 900) for each color of your tailwind configuration while using CSS variable for each.
This package has been designed to create library components where the theme (colors) are easily modifiable in the application, using CSS variables.
Installation
Using yarn :
Using pnpm :
Using npm :
Then set up your tailwind.config.js this way :
The plugin then create the following configuration for you :
The plugin is also adding the always needed following classes by default (same naming as default TailwindCSS properties) :
Simple Usage
Now in your application, you can use classes like bg-primary-500 or bg-primary-800 as usual.
DEFAULT is the variable used to generate bg-primary without suffix.
NOTE : primary and primary-500 have the same color attributed. It's a better idea to use it without suffix in your code (ex: bg-primary) if the goal is to replace the color globally using its CSS variable.
CSS Variables usage
Addition in the DOM
This plugin uses the addBase utility from tailwindcss/plugin package.
So in your DOM, under the :root attribute, you can now find all the css variables generated by the plugin :
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/:root
Change scoped color in your component
Now, if you need to modify one of the color of a property, you can do it globally or component scoped, using the default Css Variables API.
Documentation : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Compatibility
This plugin is based on CSS Custom Properties, which are not compatible with IE11. You can have partial support for the browsers that do not support them by using a PostCSS plugin that add a fallback for CSS variables, such as postcss-css-variables or postcss-custom-properties.
License
This project is licensed under the MIT License.
Description from the npm listing.
- tailwind
- tailwindcss
- palette
- color-palette
- css-variable
- tailwind-plugin
- tailwindcss-plugin
Where tailwindcss-css-variables-color-palette-plugin sits in the listing
Each band is one page of 20. Weekly downloads on a log scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Recent observations
Full history (121)Similar npm Tailwind plugins plugins
Data source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/tailwindcss-css-variables-color-palette-plugin. First seen Oct 16, 2026; last successful collection Oct 18, 2026. See the methodology.