AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do I build Tailwind CSS classes visually?

The Tailwind CSS Builder lets you pick an element (button, card, input, badge, alert or link) and dial every relevant utility with sliders, colour pickers and selects — padding, gap, font size / weight / tracking, background / text / border colours from the full default v3 palette, border width + radius, shadow, opacity and hover / dark / transition variants. It emits the ordered utility-class string, the exact CSS those classes compile to on Tailwind’s default theme, and copy-ready HTML, with a live preview and an honest WCAG contrast read-out. It runs 100% in your browser; nothing is uploaded.

What is

Tailwind utility classes

Tailwind CSS is a utility-first framework where each class sets one CSS property to one value — p-4 is 1rem of padding, text-sm is a 0.875rem font size, bg-blue-600 is #2563eb. Values come from a configurable theme scale: the default spacing scale is 0.25rem per unit (so 1 = 4px), colours are an 11-shade palette (50–950) across 22 hues, and there are named scales for font size, weight, radius and shadow. A build-time JIT compiler scans your source for the class names actually used and generates only that CSS.

Web Design

Related terms

utility-first CSSTailwind themespacing scaleJIT compilerarbitrary valuessafelistdesign tokensPostCSS

Frequently Asked Questions

Yes. Your control values are turned into a class string, the equivalent CSS and copy-ready HTML entirely on your device — nothing is uploaded, and there is no server or CDN in the processing path.

Everything is 100% client-side. The tool holds your choices as typed state and a pure engine serialises the ordered Tailwind utility-class string, the CSS those classes compile to on the default v3.4 theme, and ready HTML right in your browser tab. The live preview is rendered by your own browser from the computed CSS; no input is ever sent to a server, and there is no CDN in the processing path. It works offline once cached, and closing the tab discards your work.

No. The preview is a faithful CSS rendering of the utilities, based on Tailwind v3.4’s default theme — not the actual JIT compiler, which only runs at build time on static source.

The builder maps each utility to its exact default-theme value (px-4 → 1rem, shadow-md → the two-layer shadow, bg-blue-600 → #2563eb) and renders the element from that CSS, so what you see matches a default Tailwind setup. It is not the real compiler: Tailwind’s JIT scans your project’s static source at build time and emits only the classes it finds. That is why classes assembled from runtime state (React props, template literals) are not generated automatically — paste the copied classes into your markup or safelist them so the compiler sees them.

One spacing unit equals 0.25rem, which is 4px by default. So p-4 is 1rem (16px), gap-2 is 0.5rem (8px), and the fractional keys like 0.5 and 1.5 give 2px and 6px.

Tailwind’s default spacing scale is proportional: 1 unit = 0.25rem = 4px, and it is shared by padding, margin, width, height, gap, inset and more. Common steps are p-1 (0.25rem), p-2 (0.5rem), p-4 (1rem), p-8 (2rem), with fractional keys (0.5, 1.5, 2.5, 3.5) for fine control. This tool exposes the real scale on its sliders and shows both the class (px-4) and the value (1rem) so there is no guesswork; if your project customises the spacing theme the class names stay the same but the pixel values change.

Yes. Switch to the CSS tab to copy the exact declarations the utilities compile to, or the HTML tab for ready markup. Great for non-Tailwind projects or to learn what a utility does.

The output has three tabs: Classes (the ordered utility string to drop into JSX/HTML), CSS (the precise property/value declarations those classes resolve to on the default theme, wrapped in a selector), and HTML (copy-ready markup for the chosen element with the classes applied). A live “resolved properties” panel lists every declaration so you can see, for example, that text-sm is font-size 0.875rem with line-height 1.25rem. This makes the tool useful both for shipping Tailwind and for understanding or porting utilities to plain CSS.

Detailed Explanation

How It Works

What the Tailwind CSS Builder Does

The Tailwind CSS Builder is a visual editor that turns point-and-click choices into Tailwind utility classes. You choose an element (button, card, input, badge, alert or link) and set display and width, padding and gap, font size / weight / letter-spacing / alignment, background / text / border colours from the full default palette, border width and radius, shadow, opacity, and hover / dark / transition variants. A pure engine emits three synchronised outputs: the ordered utility-class string, the exact CSS those classes compile to on Tailwind v3.4’s default theme, and copy-ready HTML.

  • Six element templates: button, card, input, badge, alert, link
  • Three outputs kept in lock-step: classes, compiled CSS, HTML
  • Live DOM preview rendered from the computed CSS
  • Honest WCAG text-vs-background contrast ratio shown live
Methodology

Real Tailwind Default-Theme Tokens

Every control maps to a genuine Tailwind v3.4 default token, so the class string and the CSS beneath it never disagree. The spacing scale is proportional — 1 unit = 0.25rem = 4px — so px-4 is 1rem and gap-2 is 0.5rem, with fractional keys (0.5, 1.5, 2.5, 3.5) for fine control. Colours are the standard palette: 22 hues (slate, gray, red … rose) each with 11 shades (50–950), where bg-blue-600 resolves to #2563eb. Font sizes carry their paired line-heights (text-sm = 0.875rem / 1.25rem), and shadow-md is the exact two-layer box-shadow Tailwind ships.

  • Spacing: 1 unit = 0.25rem = 4px (px-4 → 1rem)
  • Colour: 22 hues × 11 shades (bg-blue-600 → #2563eb)
  • Font size utilities carry their default line-height
  • shadow-*, rounded-* and opacity-* use exact default values
Use Cases

Utility Classes, Compiled CSS and HTML

The output panel has three tabs. Classes gives the ordered utility string (layout → spacing → type → colour → border → effects → interactivity) to paste straight into JSX or HTML. CSS gives the precise property/value declarations those utilities resolve to on the default theme, wrapped in a selector, which is ideal for non-Tailwind projects or for learning what a utility does. HTML gives ready markup for the chosen element with the classes applied. A live “resolved properties” list shows every declaration, so text-sm is visibly font-size 0.875rem with line-height 1.25rem.

  • Classes tab: ordered utility string for JSX/HTML
  • CSS tab: exact compiled declarations for any project
  • HTML tab: copy-ready markup per element type
  • Resolved-properties panel exposes every property/value
Limitations

The JIT Compiler Only Sees Static Classes

Tailwind’s Just-in-Time compiler scans your project’s static source at build time and generates only the class names it literally finds. A class assembled from runtime state — a template literal built from React props, state or API data — is invisible to it and will not be generated. The practical rule is to write complete class names in your markup or add them to the safelist, rather than constructing them dynamically. This tool is built for exactly that workflow: it produces finished, copy-and-paste class strings you drop into your source so the compiler can see them.

  • JIT scans static source at build time, not runtime values
  • Dynamically concatenated class names are not generated
  • Write full class names in markup or safelist them
  • The tool emits paste-ready, statically-visible classes
Technical Details

Default Theme vs a Customised Theme

The class names and compiled CSS shown here match Tailwind v3.4’s default theme. If a project extends or overrides the theme — custom colours, a bespoke spacing scale, different fonts — the class names still work, but the actual pixel values will differ from this preview. Arbitrary values (utility-[value], e.g. w-[137px]) escape the scale for one-off needs, but they cost a little more to compile than scale values and reduce consistency, so the built-in scale is preferred where it fits. Verify the final result in your own build when your theme diverges from the defaults.

  • Values shown are Tailwind v3.4 defaults
  • A customised theme keeps class names but changes pixel values
  • Arbitrary values (w-[137px]) escape the scale at a small cost
  • Confirm in your own build when your theme differs
Privacy & Security

Private by Design

Everything happens on the user’s device. The control values are just numbers and strings serialised into a class string, the equivalent CSS and HTML locally in the browser tab — there is no server call and no CDN in the processing path. Nothing is uploaded, logged or stored; the outputs are plain text copied to the clipboard, and the live preview is rendered by the user’s own browser from the computed CSS. The tool works offline once loaded, and closing the tab discards all state.

  • Control values are serialised into classes/CSS entirely in the browser
  • No upload, no CDN in the processing path, no server, no tracking
  • Outputs are plain text copied locally; the preview runs in your browser
  • Works offline after first load; nothing is stored server-side
Tailwind default-theme scales this builder uses
ScaleExample utilityCompiled value
Spacing (1 = 0.25rem)px-4 / gap-2padding 1rem / gap 0.5rem
Font sizetext-smfont-size 0.875rem; line-height 1.25rem
Colour (22 hues × 11 shades)bg-blue-600background-color #2563eb
Radiusrounded-lgborder-radius 0.5rem
Shadowshadow-md0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)

Values reflect Tailwind CSS v3.4 defaults. A customised theme keeps the class names but changes the compiled values; arbitrary values (utility-[value]) escape the scale. As of July 2026.