Tailwind to CSS: See the Exact CSS Behind Every Utility Class
Tailwind CSS is built on the idea that each utility class maps to a small, specific CSS property or set of properties. This converter makes that mapping explicit — enter any Tailwind class names and see the exact CSS they produce, including the full spacing scale, color palette, and arbitrary value support.
Tailwind's spacing scale is 1 unit = 4px. Colors use fixed hex values from Tailwind v3's default palette.
Tailwind's Spacing Scale
Tailwind's spacing utilities use a scale where 1 unit = 4px. So p-1 = padding: 4px, p-4 = padding: 16px, p-8 = padding: 32px. The full scale from 0 (0px) to 96 (384px) is supported, plus special values like px (1px), auto, full (100%), screen (100vw), min, max, and fit.
Color Palette
Tailwind v3's default color palette includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), each with shades from 50 to 950. This converter includes the most commonly used families with full shade ranges.
Responsive and State Variants
Tailwind's responsive prefixes (sm:, md:, lg:, xl:) generate CSS wrapped in @media queries. State variants (hover:, focus:, active:, dark:) generate CSS with pseudo-selectors or the .dark parent. This converter strips the prefix and notes it in a comment, since the full media query or selector context must be added manually or via Tailwind's build pipeline.
Practical Examples
Understanding a Component's Layout Classes
See exactly what CSS a Tailwind component's class list produces.
- 1.Copy the className string from your JSX component
- 2.Paste here — the full class list or individual classes
- 3.Review the CSS properties each class maps to
- 4.Use this to understand Tailwind's behavior or to migrate to plain CSS
Utility Categories Covered
- Spacing: padding, margin, gap (full 0–96 scale)
- Typography: font-size, font-weight, text-align, line-height, letter-spacing
- Colors: background-color, color, border-color (full Tailwind v3 palette)
- Layout: display, flexbox, grid, position, overflow
Good Use Cases
- Learning what CSS each Tailwind class produces
- Migrating Tailwind components to plain CSS for non-Tailwind projects
- Debugging layout issues by seeing the actual CSS values
- Checking Tailwind class equivalents when writing CSS directly
Frequently Asked Questions
Which Tailwind utilities are supported?
Spacing (p-, m-, gap-), sizing (w-, h-), typography (text-, font-), colors (bg-, text-, border-), flexbox (flex, items-, justify-), grid (grid-cols-, col-span-), borders (border-, rounded-), shadows (shadow-), opacity, transitions, display, position, overflow, and more. The full spacing scale (0 through 96) and common color palette (slate, gray, red, orange, yellow, green, teal, blue, indigo, purple, pink) are included.
What about responsive prefixes like md: or lg:?
Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state variants (hover:, focus:, dark:, group-hover:) are stripped and noted in a comment next to the property. The CSS value is still expanded — the responsive/state context requires a media query or selector that you would add manually.
What are arbitrary values?
Tailwind allows arbitrary values in square brackets — p-[18px], bg-[#1a1a2e], w-[calc(100%-2rem)]. This converter resolves these by extracting the value from the brackets and using it directly as the CSS value.
Does this produce production-ready CSS?
The output is accurate CSS but not optimized. Tailwind's JIT compiler only includes classes actually used in your code, while this tool shows the full resolved property for each class. For production, use Tailwind's build pipeline (PostCSS + tailwindcss) to get tree-shaken, optimized CSS.