Does it support every Tailwind class?

It covers the most commonly used spacing, layout, color, and typography utilities via a built-in map, not the full Tailwind class set.

Are unrecognized classes reported?

Yes, classes that aren't recognized are listed separately so you know what's missing.

Does it need Tailwind installed?

No, the mapping is built in and runs entirely in your browser.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

Tailwind Class to CSS

Translate common Tailwind utility classes into plain CSS.

Support

Works Offline

Privacy First

No Login

No API

Tailwind classes

Plain CSS

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #3b82f6;
  border-radius: 0.5rem;
  color: #ffffff;
  font-weight: 700;
}

About the Tailwind Class to CSS

Paste a string of Tailwind utility classes and see the equivalent plain CSS declarations, covering spacing, sizing, flexbox, colors, typography, borders, and more using a built-in mapping table.

Examples

Flex container

flex items-center justify-between p-6

Output

display: flex; align-items: center; justify-content: space-between; padding: 1.5rem;

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Specificity Calculator

HTML & CSS

Compare and rank the specificity of CSS selectors.

CSS Unit Converter

HTML & CSS

Convert between px, rem, em, %, pt, vw, and vh.

Font Pairing Preview

HTML & CSS

Preview heading and body font combinations live.

HTML Entity Cheatsheet

HTML & CSS

Searchable reference of common HTML character entities.

HTML Viewer with CSS & JS Tabs (Live Preview)

HTML & CSS

Edit HTML, CSS, and JS in tabs with an instant sandboxed live preview.

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Frequently asked questions

Comments

No login needed. Comments appear after a quick review.

Loading comments…

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser