Tailwind Class to CSS
Translate common Tailwind utility classes into plain CSS.
Works Offline
Privacy First
No Login
No API
Tailwind classes
Plain CSS
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-6Output
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
Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser