CSS to Tailwind: How to Convert Common CSS Properties into Utility Classes

What Does Converting CSS to Tailwind Mean?

Traditional CSS usually groups several declarations inside a named selector:

.card {
  display: flex;
  gap: 16px;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}

In Tailwind, the same styling is composed directly in the markup:

<div class="flex gap-4 rounded-xl bg-white p-6 shadow-lg">
  ...
</div>

The classes are single-purpose utilities. Together, they recreate the layout and appearance previously stored in the custom CSS selector.

Common CSS to Tailwind Class Mapping

The exact match can change when a project uses customised theme variables. Always check the active Tailwind theme instead of assuming that every project uses default values.

How to Convert CSS to Tailwind Step by Step

Practical CSS to Tailwind Examples

1. Flexbox layout

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

Tailwind:

class="flex items-center justify-between gap-4"

2. Card styling

.card {
  padding: 24px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 10%);
}

Tailwind:

class="rounded-xl border border-slate-200 bg-white p-6 shadow-lg"

3. Typography

.title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
}

Tailwind:

class="text-2xl font-bold tracking-tight text-slate-900"

4. Hover and focus states

.button {
  background-color: #4f46e5;
  color: white;
}

.button:hover {
  background-color: #4338ca;
}

.button:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

Tailwind:

class="bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"

How to Convert CSS Media Queries to Tailwind

Tailwind uses a mobile-first approach. Base utilities apply to every screen size, while prefixed utilities apply from the selected breakpoint upwards.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

Tailwind:

class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6"

When to Use Arbitrary Tailwind Values

Arbitrary values preserve CSS that does not match an existing utility. Tailwind places the custom value inside square brackets.

Repeated arbitrary values are usually a sign that the value should become part of the project theme. Keep one-off utilities for genuinely unique design requirements.

How to Decode Existing Tailwind Classes

Conversion also works in reverse. When you inherit markup containing a long utility string, identify each class category before changing the component.

Paste the classes into CSSPeek’s free Tailwind Class Decoder to translate dense utility strings into readable groups.

mx-auto flex max-w-xl items-center gap-4
rounded-xl border border-slate-200
bg-white p-6 shadow-lg
md:p-8 dark:bg-slate-900

Convert Computed Website Styles into Tailwind

Sometimes you do not have the original stylesheet. You only have a live component whose spacing, typography or layout you want to understand.

The CSSPeek Chrome extension reveals the computed CSS behind the element you select, including its selector, box model, typography, colours and display properties.

Explore CSSPeek’s selector inspection and typography inspection features for faster component analysis.

When a Tailwind Class Converter Is Not Enough

Automatic tools are useful for simple declarations, but they cannot always understand the design intent or full stylesheet context.

Also check which Tailwind version a converter targets. A tool built around an older version may produce utilities or configuration advice that does not match the current project.

CSS-to-Tailwind Conversion Checklist

CSSPeek Tailwind Class Decoder

Turn dense Tailwind class strings into readable styling decisions.

Paste utility classes, understand what each one controls and separate layout, spacing, typography and responsive variants more quickly.

Common CSS-to-Tailwind Mistakes

• Using arbitrary values for every declaration instead of following the theme.
• Ignoring inherited font, colour and line-height values.
• Converting desktop CSS first instead of preserving mobile-first behaviour.
• Forgetting hover, focus, active and disabled selectors.
• Assuming a similar utility is an exact visual match without testing it.
• Keeping repeated class strings in many files instead of creating a reusable component.
• Using an outdated converter without checking its supported Tailwind version.

Frequently Asked Questions