DEV Community

Emmanuel Cartelli
Emmanuel Cartelli

Posted on

Extracting Tailwind’s Color Palette Without Tailwind

#tailwindcss #css #opensource #cli

As a solo developer juggling many roles (frontend, backend, design, logic, performance...), I often find myself building projects that are not SPAs. Static websites, CMS-based pages, or SSR setups where the HTML is generated server-side — and where utility-first frameworks like Tailwind can become more of a burden than a help.

But there’s one thing I’ve always loved about Tailwind:

💎 The color palette is just too good to pass up.

From the carefully tuned shades of blue, zinc, or amber, to the new OKLCH direction in v4 — Tailwind’s color system is well-designed, modern, and super versatile.

Yet I rarely use Tailwind itself, because:

  • I prefer SCSS and semantic class names
  • I like having multiple Vite entry points
  • I have ADHD, and large blocks of utility classes in HTML become overwhelming when I need to refactor or maintain style over time

What I needed

So I asked myself:

"What if I could just extract the Tailwind colors I love into formats I actually use?"

What I wanted was:

  • Tailwind’s full color palette
  • In HEX, RGBA, and OKLCH formats
  • Exported as clean variables:
    • --blue-500 (CSS)
    • $blue-500 (SCSS)
    • @blue-500 (LESS)
    • blue-500 = ... (Stylus)
  • With a simple CLI I could run on demand
  • And the ability to only export the formats I need (not all at once)

So I built this tool:

tailwind-colors-vars

What it does

tailwind-colors-vars is a CLI tool that extracts the default Tailwind colors and converts them into variable files for CSS, SCSS, LESS, and Stylus.

You can choose:

  • Format: hex, rgba, or oklch
  • Output style: css, scss, less, styl
  • Flat output or grouped folders
  • JSON export, or console print

💻 Installation 

npm install tailwind-colors-vars
Enter fullscreen mode Exit fullscreen mode

🚀 Usage

Generate all formats in all styles:

tailwind-colors -f all -e all
Enter fullscreen mode Exit fullscreen mode

Export only HEX in SCSS:

tailwind-colors -f hex -e scss
Enter fullscreen mode Exit fullscreen mode

Output to a custom directory:

tailwind-colors -f rgba -e css -o theme/colors
Enter fullscreen mode Exit fullscreen mode

Export only OKLCH to JSON:

tailwind-colors -f oklch --json-out colors.json
Enter fullscreen mode Exit fullscreen mode

Print to console without writing to files:

tailwind-colors -f hex -e css --print
Enter fullscreen mode Exit fullscreen mode

Export to a flat folder (no /scss/, /less/, etc.):

tailwind-colors -f hex -e scss --flat
Enter fullscreen mode Exit fullscreen mode

Output Structure

Default (nested):

dist/
├── css/
│   └── colors-oklch.css
├── scss/
│   └── colors-hex.scss
...
Enter fullscreen mode Exit fullscreen mode

With --flat:

dist/
├── colors-oklch.css
├── colors-hex.scss
...
Enter fullscreen mode Exit fullscreen mode

Why this helped me

As someone who builds and maintains lots of small tools and sites (often alone), I really needed a way to:

  • Get a solid, modern color system without rebuilding one from scratch
  • Avoid Tailwind’s mental load when I don’t need it
  • Still get the benefits of Tailwind’s thoughtful palette in my own setup

This CLI gives me a quick way to drop Tailwind’s palette into any project — SCSS theme, WordPress, Pug, Liquid, Astro, you name it.

It started as a personal productivity hack. But it might help you too.

Example: CSS Output (HEX) 

:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  ...
}
Enter fullscreen mode Exit fullscreen mode

🧪 Example: SCSS Output (OKLCH) 

$zinc-950: oklch(0.1790 0.0059 281.68);
$blue-500: oklch(0.6278 0.1825 264.92);
...
Enter fullscreen mode Exit fullscreen mode

GitHub & npm

Happy theming!

Top comments (0)