Skip to content

Tailwind · theme.extend

Tailwind config generator

Same ramp engine as our CSS variables tool, shaped as a module.exports stub for Tailwind v3-style configs. Flip between HEX strings, oklch() strings, or commented pairs depending on how brave your production browsers are this quarter.

Scale ramp
Theme value format

Why this Tailwind stub exists

Plenty of teams still ship a classic tailwind.config.js. This page emits a ready-to-merge theme.extend.colors object from the same ramp engine as our CSS variables exporter — so web designers and Tailwind consumers stop inventing different purple-500s.

How to use it

  1. Match ramp mode and base HEX to what you generated in CSS variables if you need parity.
  2. Copy the snippet and merge into theme.extend.colors — avoid overwriting unrelated keys.
  3. Verify PostCSS / browserslist accept OKLCH strings if you export them.
  4. Compare numerically against the official Tailwind palette when you want familiar spacing.

Prefer CSS-first Tailwind v4?

Treat the output as a map of names to color strings you can port into @theme — the math matches our other exporters.

v3 config vs v4 CSS-first

Newer Tailwind releases push more color definition into CSS. This generator targets the older JS config shape on purpose because it is still what many repos paste from docs — transcribe manually if you have already moved.

Merge advice

  • Do not blindly overwrite your whole theme.extend.colors — paste the block and merge keys.
  • Prefix becomes the nested object key — rename to primary or surface to match your vocabulary.

Related tools

Reference palette, Android parity, and CSS export.

Tailwind color reference Official scales with copy chips for cross-checks. Android colors.xml Matching resource names from the same ramp engine. CSS variables Plain :root output when the team does not use Tailwind.

Notes & FAQ

How do I keep values aligned with the CSS variables tool?

Use the same base HEX, prefix, and ramp mode in both exporters before you copy — the engines are shared on purpose.

Tailwind v4?

v4 often uses @theme instead of theme.extend. Treat this output as a map of names to color strings you can port into your CSS-first theme — the math underneath matches our other exporters.

Official palette

For the stock Tailwind palette with copy chips, see Tailwind colors reference.

Why module.exports?

Many projects still use CJS configs. If you are on ESM tailwind.config.ts, paste the inner object and adjust export syntax — we cannot guess your TypeScript path aliases.