DEV Community: Emmanuel Cartelli

Extracting Tailwind’s Color Palette Without Tailwind

Emmanuel Cartelli — Sat, 12 Apr 2025 02:56:19 +0000

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

🚀 Usage

Generate all formats in all styles:

tailwind-colors -f all -e all

Export only HEX in SCSS:

tailwind-colors -f hex -e scss

Output to a custom directory:

tailwind-colors -f rgba -e css -o theme/colors

Export only OKLCH to JSON:

tailwind-colors -f oklch --json-out colors.json

Print to console without writing to files:

tailwind-colors -f hex -e css --print

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

tailwind-colors -f hex -e scss --flat

Output Structure

Default (nested):

dist/
├── css/
│   └── colors-oklch.css
├── scss/
│   └── colors-hex.scss
...

With --flat:

dist/
├── colors-oklch.css
├── colors-hex.scss
...

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;
  ...
}

🧪 Example: SCSS Output (OKLCH)

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

GitHub & npm

Happy theming!

APPRENDRE À UTILISER GRID

Emmanuel Cartelli — Tue, 10 Aug 2021 06:39:29 +0000

Prérequis

Vous n'avez pas besoin de prérequis particulier si ce n'est la connaissance des balises html et quelques notions de css.

0. Introduction

Utiliser "Grid" en CSS est une alternative à Flexbox qui peut s'avérer très utile pour construire une section quadrillée ou même un page complète.

Je trouve, à titre personnel que "Grid", n'est que trop peu utilisé et c'est bien dommage car flex ne semble pas toujours logique en fonction de la tâche à effectuer.

Dans certains cas (que nous allons développer), vous verrez à quel point "Grid" peut se montrer très utile et encore plus quand il est combiné avec flex ! Sortez votre éditeur on est parti !

1. Fabriquer sa première grille

1.1 Le conteneur de grille

Dans votre éditeur, nous allons créer un premier boitier qui va contenir notre grille. Pour cet exemple, j'utiliserais la classe "grid-container". C'est simple, c'est clair et comme ca, on s'y retrouvera.

<div class="grid-container">
</div>

Ce boitier représente notre grille dans laquelle nous allons placer nos éléments. Pour ce faire, nous avons besoin, par le biais du CSS, de lui dire qu'il doit se comporter comme une grille.

Pour cela, il nous faut utiliser la propriété CSS "display", comme ceci :

.grid-container {
  display: grid;
}

Voilà, votre boitier sait qu'il doit afficher les éléments qu'il contient dans une grille.

Et là vous allez me dire :
"Oui mais... Il n'y a rien dedans...".
Et vous avez parfaitement raison ! Nous allons donc remédier à ce problème sur le champ !

1.2 Le contenu de la grille

Allez on ressort l'éditeur et on continue. Nous allons ajouter 2 boitiers dans notre grille.

<div class="grid-container">
  <div class="first element"></div>
  <div class="second element"></div>
</div>

Super, on a du contenu dans notre grille ! Mais on ne le voit pas encore... Pas de panique, ca arrive.
Nous avons dit à notre boitier qui contient la grille qu'il devait s'affichait comme tel, mais nous ne lui avons pas précisé combien de ligne ou même de colonnes il devait afficher.
Eh oui ! Il faut lui préciser !

1.3 grid-template-columns

Dans notre cas précis, je veux que ma grille se compose de deux colonnes. Je souhaite aussi que la première colonne prenne 70% de l'espace disponible et la seconde 30%.

Pour cela rien de plus simple. Je retourne dans mon CSS, et je vais éditer encore une fois mon ".grid-container" et je lui ajoute la propriété suivante :

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

Rajoutez aussi le code suivant pour afficher le rendu de votre grille :

/* a déclarer tout au début de votre css*/

html, body, .grid-container { height: 100%; margin: 0; }


/*Ici le ">" va venir pointer un élement enfant. 
Tandis que le "*" veut simplement dire "TOUS". 
Pour faire simple, j'ai ciblé tous les éléments enfants 
du conteneur ".grid-container;"*/

.grid-container > * {
  border: 1px solid red;
}

Ca y est ! nous voyons enfin un résultat concret !
Mais bon, concrètement, ca veut dire quoi cette ligne de code ?

  grid-template-columns: repeat(2, 1fr);

Eh bien c'est très simple. cette propriété va nous permettre de créer des colonnes !

"Mais ca veut dire quoi "repeat(2, 1fr);" ?"

Calme toi Ghislaine, j'y viens.

Ca veut simplement dire je créé 1 colonne d'une taille de "1fr", et je répète l'opération deux fois. Ce qui me donne deux colonnes.
Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille.

Il y a une autre façon de l'écrire, un peu plus embêtante selon moi, mais qui fait très bien l'affaire :

grid-template-columns: 1fr 1fr;

Bon, voilà nous avons notre grille, mais je souhaitais qu'une de mes colonnes fasses 70% et l'autre 30%.
Encore une fois, rien de plus simple :

.grid-container {
  display: grid;
  grid-template-columns: 70% 30%;
}

Nous avons bien notre grille d'affichée, elle a les bonnes proportions, mais nous pouvons faire mieux !
Si on utilise un système de fraction on peut simplifier notre grille. 70% et 30%, ca représente respectivement 2/3 et 1/3.
Vous vous souvenez de l'unité "fr" qu'on a vu juste au dessus ?
eh bien on va l'utiliser pour fractionner notre grille. Ce qui doit vous donner :

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr; 
}

Et voilà ! Vous avez créé votre première grille !
Nous allons pouvoir passer au chapitre suivant et voir jusqu'où on peut aller avec 'Grid'.