CSS to Tailwind Converter

Worked Examples

Flexbox card

Input CSS:

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

Output Tailwind:

/* .card */
flex flex-col items-center gap-4 p-6 rounded-lg

Typography

Input CSS:

font-size: 1.125rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;

Output Tailwind:

text-lg font-semibold text-center uppercase tracking-wider

Limitations

This tool uses a built-in mapping table rather than a full CSS parser. Complex values such as custom colors, multi-value transitions, CSS variables, and calc() expressions are left as /* keep: … */ comments for you to handle manually or convert using Tailwind’s arbitrary value syntax (p-[13px], text-[#ff6600]).

Example: A Button With a Hover State and a Media Query

.btn {
  margin: 0 auto;
  padding: 16px 24px;
  color: #3b82f6;
  background-color: #ffffff;
  width: 50%;
  max-width: 64rem;
  line-height: 1.5;
  border: 1px solid #e5e7eb;
  margin-top: 13px;
  transition: all 0.2s;
}
.btn:hover { background-color: #2563eb; }
@media (min-width: 768px) { .btn { padding: 2rem; } }

converts to

/* .btn */
my-0 mx-auto py-4 px-6 text-blue-500 bg-white w-1/2 leading-normal border border-solid border-gray-200 transition-all duration-200
/* keep: max-width: 64rem */
/* keep: margin-top: 13px */

/* .btn:hover */
bg-blue-600

/* .btn (md) */
md:p-8

What happened, and how to finish the class list (Tailwind docs):

• 16px 24px became py-4 px-6: pixel values are divided by 16 to get rem, and one spacing step is 0.25rem.
• #3b82f6, #ffffff, and #2563eb matched default palette colors (blue-500, white, blue-600).
• border: 1px solid #e5e7eb became border border-solid border-gray-200. Every part of the shorthand (width, style, color) must be in the table; if one is not, the whole declaration is kept as a comment, so no part is dropped.
• transition: all 0.2s became transition-all duration-200. The duration is always written, because a Tailwind transition-* class alone means 150 ms. Tailwind’s classes also set the timing curve cubic-bezier(0.4, 0, 0.2, 1), where CSS defaults to ease; add ease-[ease] if the curve must match exactly.
• max-width: 64rem was kept although max-w-5xl is 64rem. Values that do not match the tool’s table are kept even when a class exists.
• .btn:hover became its own group. Add the hover: prefix: hover:bg-blue-600.
• The rule inside @media (min-width: 768px) became md:p-8: 768px is the default md breakpoint. Other media queries label the group but get no prefix.

Finished classes:

<button class="mx-auto mt-[13px] mb-0 py-4 px-6 md:p-8 text-blue-500 bg-white hover:bg-blue-600
               w-1/2 max-w-5xl leading-normal border border-solid border-gray-200
               transition-all duration-200">

Example: Common Declarations Without a Selector

padding: 0.5rem 1rem;
margin: 0;
top: 0;
z-index: 10;
overflow: hidden;
position: sticky;
opacity: 0.5;
cursor: pointer;
grid-template-columns: repeat(3, 1fr);
flex: 1;
height: 100vh;
font-size: 14px;

converts to

py-2 px-4 m-0 top-0 z-10 overflow-hidden sticky opacity-50 cursor-pointer grid-cols-3 flex-1 h-screen text-sm

Arbitrary Values

For a value outside the default scale, Tailwind accepts the value in square brackets: mt-[13px], max-w-[60rem], text-[#ff6600], grid-cols-[200px_1fr] (an underscore stands for a space). The converter never writes these; it leaves a keep comment so you can decide between an arbitrary value and the nearest scale step.

Limits

• Values are looked up in a mapping table, not computed: a value outside the table is kept as a comment even when a class exists (see max-width above).
• Selectors with pseudo-classes become separate groups; no hover: or focus: prefixes are written.
• Only @media (min-width: …) with a default breakpoint width (640px, 768px, 1024px, 1280px, 1536px or the same in rem) becomes a prefix. Other media queries, @supports, and container queries only label the group.
• A transition list with commas, cubic-bezier(), or a duration outside the scale (0, 75, 100, 150, 200, 300, 500, 700, 1000 ms) is kept as a comment.
• CSS variables, calc(), and colors outside the default palette are kept as comments.
• Tailwind v4 renamed some utilities (for example the shadow and radius scales). Check the upgrade guide if you use v4.