Breaking: Developers Ditch Tailwind's Color System for Open Alternatives
In a move that signals a shift away from the dominance of Tailwind CSS, a developer has publicly abandoned the framework's color palette in favor of handpicked, open-source alternatives. The developer, who previously relied on Tailwind's convenient blue-100 through blue-900 shades, announced the switch to vanilla CSS—and compiled a curated list of color palettes that are now gaining traction.
"I'm not very good with colors, so having a pre-made palette by someone who is makes a huge difference," the developer said. "But I'm also tired of the same Tailwind look."
Background: The Tailwind Color Dependency
Tailwind CSS offers a comprehensive color palette with numerical tiers (e.g., blue-50 to blue-900), making it easy for developers to quickly apply consistent colors without design expertise. However, its proprietary nature has led some to seek alternatives that are more customizable or accessible. The developer's post on Mastodon asking for recommendations sparked a flood of responses, leading to this compilation.
Curated Favorites: Top Three Palettes
The developer highlighted three standout palettes as personal favorites:
- uchū – A space-themed palette. (CSS file, FAQ)
- flexoki – A lively, flexible option. (CSS file)
- reasonable colours – Focused on accessibility. (CSS file)
More Color Palettes
Additional palettes recommended by the community include:
- Web Awesome
- Radix
- US Web Design Systems
- Material Design (Google's standard, but often used independently of Tailwind)
Color Scheme Generators – For When You Want to DIY
Several generator tools were also shared, though the developer admits they find these difficult to use. "Maybe one day I'll get better at color and actually use a generator successfully," they said. The tools include:
- Harmonizer
- tints.dev
- Coolors
- Colorpalette.pro
Advanced Color Tools
For developers looking to go further, these advanced resources were suggested:
- Colorhexa – Includes colorblindness information.
- oklch – A modern color space for CSS.
- Generative colors with CSS – Using the
oklch()function to dynamically generate colors. (See example)
What This Means for Web Development
The availability of open-source CSS color palettes gives developers more freedom to customize without relying on a single framework. Designers and non-designers alike can now access curated, accessible color sets that work with vanilla CSS. This trend could encourage wider adoption of pure CSS over heavy dependencies. As more palettes emerge, the web may become more colorful—and more accessible—than ever.