TPToolpazar

Global Araç

Tailwind To Css

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  padding: 8px 0;
  background-color: white;
  border-radius: lg;
  font-size: 14px;
  font-weight: 600;
}

Paste a string of Tailwind utility classes — like flex items-center gap-4 px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg shadow — and get back the equivalent CSS rule set. Useful when you're debugging why a class isn't doing what you expect, when you want to copy a styled component into a project that doesn't use Tailwind, or when you're learning Tailwind and want to see the underlying CSS each utility produces.

The conversion handles the full Tailwind v3 utility surface: spacing (p-4 → padding: 1rem), colors with the v3 palette (bg-blue-600 → background-color: rgb(37 99 235)), flex/grid layout, typography, shadows, transforms, and pseudo-class variants (hover:, focus:, md:, dark:) — variants get wrapped in their corresponding selector or media query in the output.

Useful when migrating off Tailwind, exporting a component to a CSS-Module-only codebase, or just understanding what a long utility chain actually does. Output respects the default Tailwind theme (rem-based spacing, the v3 color palette); custom theme extensions in tailwind.config.js aren't reflected, so this is for vanilla utilities.

Nasıl Kullanılır

  1. Paste your Tailwind class string into the input. Whitespace separates classes; you can also paste a multi-line block.
  2. The CSS output regenerates live, organized by selector (base styles, then `:hover`, `:focus`, then media queries).
  3. Click Copy CSS to grab the result. The output is plain CSS — drop it straight into a `.css` file or CSS-in-JS object.
  4. Unknown or custom-theme classes are listed at the bottom with a note — the converter doesn't have access to your tailwind.config.js, so customizations need manual translation.
  5. For a one-off CSS export of an entire component, paste the full className string of the outermost wrapper plus each child's classes line by line.

Ne Zaman Kullanılır

  • Debugging why a particular Tailwind class isn't producing the expected style (you'll see the actual CSS rule).
  • Migrating a Tailwind component into a non-Tailwind project (vanilla CSS / CSS Modules / styled-components).
  • Learning Tailwind — see the CSS each utility produces side-by-side.
  • Documenting a design token's CSS equivalent for a styleguide.

Ne Zaman Kullanılmaz

  • Code that uses arbitrary values (`w-[427px]`, `bg-[#abc123]`) — most arbitrary values pass through correctly, but exotic ones may not parse.
  • Custom-theme tokens — the tool uses the default Tailwind v3 theme. If your project extends colors or spacing, the output won't reflect those.
  • Tailwind v4 alpha syntax — output targets v3 conventions. v4 features (CSS-first config, native cascade layers) aren't handled.
  • Generating production CSS for a real Tailwind site — let Tailwind's own JIT compiler do that. This tool is for translation, not production builds.

Örnek

Girdi
px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded
Çıktı
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgb(59 130 246);
color: rgb(255 255 255);
border-radius: 0.25rem;

&:hover {
  background-color: rgb(37 99 235);
}

Tailwind expands shorthand utilities into their full property set — `px-4` is two declarations, `py-2` is two more. The `:hover` variant gets nested as a selector for easy CSS-in-JS use.

Sık Sorulan Sorular

Does it know about my custom theme tokens?

No — the tool uses the default Tailwind v3 theme (the colors and spacing scale shipped in `tailwindcss`). If your `tailwind.config.js` extends those, the customizations won't be reflected. Stick to default tokens or manually translate the customs.

What about responsive variants like `md:flex-row`?

Wrapped in `@media (min-width: 768px) { ... }` for `md:`, 1024px for `lg:`, etc. — using Tailwind's default breakpoints. If you've customized them in tailwind.config, the breakpoints in the output will be wrong.

Does it handle dark mode (`dark:bg-slate-900`)?

Yes — wrapped in a `.dark &` selector by default (Tailwind's `class` strategy). If you use the `media` strategy, replace it with `@media (prefers-color-scheme: dark)`.

Why are colors written as `rgb(59 130 246)` instead of `#3b82f6`?

Tailwind v3 emits colors in space-separated RGB to support the `bg-blue-500/50` opacity-modifier syntax. Both formats are equivalent CSS — you can hex-convert if your codebase prefers hex.

Will it convert `@apply` directives?

Yes, in the sense that pasting the classes inside an @apply block produces the expected CSS. Just paste the class names (without `@apply ...;`).