CSS to Tailwind Converter — CSS to Tailwind Classes

Convert CSS declarations into Tailwind CSS utility classes, shown as @apply rules for each selector. Use it to look up matching utilities while migrating existing styles. The converter targets Tailwind CSS v3.

Find the Tailwind utilities that match existing CSS rules during a migration.

CSS

TailwindCSS 3.x

When to use it

Find the Tailwind utilities that match existing CSS rules during a migration.
Learn Tailwind class names by converting CSS you already know.

How to use

Paste CSS rules.
Adjust the rem base value or the Tailwind configuration if your project uses custom settings.
Copy the classes after @apply into your markup or stylesheet, then check the result in your Tailwind project.

CSS input

.card { display: flex; padding: 1rem; }

Tailwind output (default scale)

.card {
  @apply flex p-4;
}

Details and limitations

Class names and scales follow Tailwind CSS v3. Compatibility with Tailwind CSS v4 configuration and syntax is not guaranteed.

Custom values, complex selectors and pseudo-elements may not convert. The output is not guaranteed to look identical, so check it on the real page.

The custom configuration field is evaluated as JavaScript in your browser. Do not paste configuration you do not trust.

FAQ

Does it support Tailwind CSS v4?

It uses Tailwind CSS v3 class names and scales. Many utilities, such as flex, p-4 and text-sm, keep their names in v4, but v4 moves configuration into CSS and renames some utilities, so check the output in your v4 project.

How do I use class names instead of @apply?

Copy the list after @apply into the element's class attribute, for example class="flex p-4". The @apply form groups the classes by the original selector.

Can it convert Bootstrap classes to Tailwind?

No. It converts CSS declarations, not class names from another framework. Paste the CSS rules behind a Bootstrap component to see the matching utilities.

Why are some declarations not converted?

Values outside the Tailwind scale, complex selectors and pseudo-elements may have no direct utility. Keep those as CSS or add them to your Tailwind configuration.

CSS