DevBolt
Processed in your browser. Your data never leaves your device.

How do I convert Tailwind CSS classes to standard CSS?

Paste your Tailwind utility classes (or a full class="..." attribute) and the tool instantly generates the equivalent standard CSS properties. It supports 500+ classes including spacing, layout, typography, borders, transforms, filters, and arbitrary bracket values like w-[300px]. Customize the CSS selector name in the output. Everything runs in your browser — your code never leaves your device.

Layout utilities to CSS
Input
flex items-center justify-between p-4 gap-2
Output
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
gap: 0.5rem;
← Back to tools

Tailwind CSS to CSS Converter

Paste Tailwind utility classes and get the equivalent standard CSS. Supports spacing, layout, typography, borders, transforms, filters, colors, and arbitrary values.

Samples:
Paste Tailwind classes to see CSS

Supported Tailwind Classes

Layout
display, position, visibility, overflow, z-index, box-sizing, isolation
Flexbox
flex-direction, wrap, grow, shrink, order, justify, align, self, gap
Grid
grid-cols, grid-rows, col-span, row-span, auto-cols, auto-rows, flow
Spacing
p, px, py, pt/r/b/l, m, mx, my, mt/r/b/l, space-x/y, gap
Sizing
w, h, min-w, max-w, min-h, max-h, basis, screen, full, fractions
Typography
text-size, font-weight/style/family, leading, tracking, text-align/decoration/transform, whitespace, truncate
Borders
border-width/style/radius, rounded, outline, ring
Effects
opacity, shadow, blur, grayscale, invert, sepia, backdrop-blur
Transforms
scale, rotate, translate, skew, origin
Transitions
transition, duration, ease, delay
Colors
text, bg, border, ring, accent, fill, stroke (black/white/transparent/current + arbitrary values)
Misc
cursor, pointer-events, select, resize, appearance, object-fit/position, aspect-ratio, will-change, mix-blend, columns, content, scroll, table, list

About Tailwind CSS to CSS Converter

  • 500+ utility classes — converts layout, spacing, typography, borders, transforms, filters, and more.
  • Arbitrary values — handles bracket notation like w-[300px] and bg-[#1a1a2e].
  • Responsive/state prefixes — strips sm:, hover:, dark: etc. and marks them as comments.
  • Selector input — customize the CSS selector name for the output.
  • Unrecognized tracking — classes without a mapping are flagged so you can handle them manually.
  • Everything runs in your browser — no data is sent over the network.

Tips & Best Practices

Pro Tip

Use this conversion to understand what Tailwind utilities actually generate

Converting Tailwind to CSS is a great learning tool. Seeing that `flex items-center gap-4` produces `display: flex; align-items: center; gap: 1rem;` builds understanding of both CSS and Tailwind simultaneously.

Common Pitfall

Tailwind responsive prefixes generate @media queries, not simple properties

Converting `md:flex lg:grid` produces two separate @media queries, not just two properties. The CSS output can be significantly more verbose than the Tailwind input, which is exactly why Tailwind exists.

Real-World Example

Extract Tailwind-to-CSS for email templates and non-Tailwind projects

Email clients don't support utility-class CSS. Convert your Tailwind-styled component to plain CSS, then inline it for email compatibility. Also useful when contributing CSS to projects that don't use Tailwind.

Security Note

Verify converted CSS doesn't include unsafe arbitrary values

Tailwind's arbitrary value syntax (e.g., [background:url(...)]) passes through to CSS directly. When converting Tailwind to CSS, audit any arbitrary values for unexpected URLs, JavaScript expressions, or data URIs that could pose security risks.

Frequently Asked Questions

How do I convert Tailwind utility classes to standard CSS?
Paste your Tailwind classes into the input field and the tool instantly generates the equivalent CSS properties. You can paste raw classes like 'flex items-center p-4', or a full class="..." or className="..." attribute — the tool strips the attribute syntax automatically. Each Tailwind class maps to one or more CSS declarations. You can customize the selector name (default is .element) to match your project's naming convention.
Does the converter handle responsive and state prefixes like sm: and hover:?
Yes. Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state prefixes (hover:, focus:, active:, dark:, disabled:, etc.) are recognized and stripped during conversion. The base class is converted to CSS normally and the prefix is noted as a comment so you know which classes need media queries or pseudo-selectors in your final CSS. Nested prefixes like sm:hover:bg-white are also handled.
What Tailwind classes are supported?
The converter supports 500+ Tailwind utility classes covering: display, position, visibility, flexbox, grid, spacing (padding, margin, gap), sizing (width, height, min/max), typography (font size, weight, family, line height, letter spacing, text align/decoration/transform), borders (width, style, radius), effects (opacity, shadow), transforms (scale, rotate, translate, skew), transitions, filters (blur, grayscale), colors (black, white, transparent, current, arbitrary hex/rgb), and arbitrary bracket values like w-[300px] or bg-[#1a2b3c].
How are unrecognized classes handled?
Classes that cannot be mapped to standard CSS — such as Tailwind color palette classes (bg-red-500, text-blue-300), plugin utilities, or custom classes — are listed separately as 'unrecognized'. This lets you see exactly which classes need manual conversion or a Tailwind config lookup. The tool converts everything it can and clearly flags the rest.

Related Convert Tools

TW

CSS to Tailwind Converter

Convert CSS to Tailwind utility classes instantly — 100+ properties including layout, spacing, typography, borders, and effects

SVG

SVG to JSX Converter

Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread

API

OpenAPI to TypeScript

Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types

ZOD

JSON to Zod Converter

Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields