Como usar: CSS Variables to Tailwind
- Paste your CSS — a whole stylesheet is fine; only custom properties are read.
- Choose Tailwind v3 config (a
module.exportscolors object) or Tailwind v4 @theme. - Pick Literal values to copy the colors, or var() references to keep your variables as the single source of truth (best for dark mode and theming).
- Copy or download the result into
tailwind.config.jsor your main CSS file.
What does this converter do?
Many projects start with design tokens written as CSS custom properties — --primary: #ff0055;, --brand-500: #6366f1;. When you adopt Tailwind you need the same colors in its theme so classes like bg-primary and text-brand-500 exist. Retyping them is slow and error-prone; this tool parses every custom property, keeps the ones that are colors and writes the Tailwind structure for you.
How variables are grouped
--brand-50…--brand-900become a nestedbrand: { 50: …, 900: … }object, giving youbg-brand-50throughbg-brand-900.- Suffixes like
-light,-dark,-hoverand-foregroundare grouped under their base name; the plain variable becomesDEFAULT, sobg-primaryandbg-primary-lightboth work. - A leading
color-prefix is removed (--color-surface→surface). - Non-color tokens such as
--radius-md: 8pxor font stacks are skipped and listed.
Tailwind v3 vs v4
Tailwind v3 configures colors in JavaScript under theme.extend.colors. Tailwind v4 moved configuration into CSS: any --color-* variable inside an @theme block generates color utilities, and v4’s default palette uses OKLCH — which is why the v4 output converts literal values to oklch().
Literal values or var() references?
Referencing variables (primary: 'var(--primary)') means you can redefine --primary inside .dark or a brand theme and every Tailwind class follows automatically. Note that Tailwind v3 can’t apply opacity modifiers like bg-primary/50 to plain var() colors; store channels instead (--primary: 255 0 85 with rgb(var(--primary) / <alpha-value>)) if you need them. Tailwind v4 handles opacity modifiers on variables via color-mix().
Também pesquisado como: tailwind config, css custom properties, tailwind colors, theme, @theme, design tokens, tailwind v4.
Ferramentas que combinam com: CSS Variables to Tailwind
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Perguntas frequentes
Does it work with Tailwind CSS v4?
--color-* variables, which v4 turns into utilities such as bg-primary.Which color formats are recognized?
var(--blue-500).