CSS to Tailwind

Convert CSS styles to Tailwind CSS utility classes. Supports common CSS properties with intelligent mapping.

CSS Input

Tailwind Classes

Output

md:grid md:gap-6 inline-flex items-center justify-center py-3 px-6 rounded-lg bg-[#3b82f6] text-white font-semibold cursor-pointer duration-300 hover:bg-[#2563eb] hover:scale-105 focus:outline-none focus:shadow-[0_0_0_3px_rgba(59,_130,_246,_0.5)] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed before:content-[''] before:absolute before:top-0 before:left-0

Class Preview

md:gridmd:gap-6inline-flexitems-centerjustify-centerpy-3px-6rounded-lgbg-[#3b82f6]text-whitefont-semiboldcursor-pointerduration-300hover:bg-[#2563eb]hover:scale-105focus:outline-nonefocus:shadow-[0_0_0_3px_rgba(59,_130,_246,_0.5)]active:scale-95disabled:opacity-50disabled:cursor-not-allowedbefore:content-['']before:absolutebefore:top-0before:left-0

Pseudo-classes & Pseudo-elements

State Modifiers

:hover → hover:
:focus → focus:
:active → active:
:disabled → disabled:
:focus-visible → focus-visible:
:focus-within → focus-within:

Child Selectors

:first-child → first:
:last-child → last:
:odd → odd:
:even → even:
:empty → empty:
:only-child → only:

Pseudo-elements

::before → before:
::after → after:
::placeholder → placeholder:
::selection → selection:
::marker → marker:
::first-line → first-line:

Form States

:checked → checked:
:required → required:
:valid → valid:
:invalid → invalid:
:read-only → read-only:
:placeholder-shown → placeholder-shown:

Media Queries

@media (min-width: 640px) → sm:
@media (min-width: 768px) → md:
@media (min-width: 1024px) → lg:
@media (min-width: 1280px) → xl:
@media (prefers-color-scheme: dark) → dark:
@media print → print:

Accessibility

motion-reduce:
motion-safe:
contrast-more:
portrait:
landscape:

Supported Properties

Layout

display
position
overflow
z-index
visibility
isolation

Flexbox

flex / flex-grow / shrink
flex-direction / wrap
justify-content
align-items / content / self
gap
order

Grid

grid-template-columns
grid-template-rows
grid-column / row
place-content / items / self

Sizing

width / height
min-* / max-*
aspect-ratio
columns

Spacing

padding / margin
top / right / bottom / left
inset

Typography

font-size / weight
text-align / transform
line-height
letter-spacing
text-decoration
white-space / word-break

Borders

border-width / style / color
border-radius
outline-*
border-collapse / spacing

Effects

box-shadow
opacity
mix-blend-mode
filter / blur

Transitions

transition / property
transition-duration
transition-timing-function
transition-delay
animation

Transforms

transform
scale
rotate
will-change

Background

background-color
background-size / position
background-repeat
background-clip

Interactivity

cursor
pointer-events
user-select
resize
touch-action
scroll-behavior

SVG

fill
stroke
stroke-width

Other

content (::before/after)
object-fit / position
list-style-*
table-layout
accent-color / caret-color

Frequently Asked Questions

Yes, completely free with no sign-up. Convert unlimited CSS to Tailwind classes for your projects.

No, all conversion happens in your browser. Your CSS code never leaves your device.

Copy CSS from your stylesheet, browser DevTools, or any source and paste it into the input field. The tool will show you equivalent Tailwind utility classes. For custom values not in the default Tailwind config, it suggests arbitrary value syntax like w-[123px]. Click copy to get the Tailwind classes and paste them directly into your className attribute. Some CSS properties may need the @apply directive or arbitrary values for edge cases.

We support the most common CSS properties. For properties without direct Tailwind equivalents, we suggest arbitrary values like w-[123px].

Was this helpful?

Related Tools

Tailwind Class Sorter

Sort Tailwind classes in recommended order

Tailwind Color Shades

Generate full 50-950 color scale from any color

CSS Unit Converter

Convert between CSS units: px, rem, em, pt, cm, mm, in, pc, vh, vw, %

md:grid md:gap-6 inline-flex items-center justify-center py-3 px-6 rounded-lg bg-[#3b82f6] text-white font-semibold cursor-pointer duration-300 hover:bg-[#2563eb] hover:scale-105 focus:outline-none focus:shadow-[0_0_0_3px_rgba(59,_130,_246,_0.5)] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed before:content-[''] before:absolute before:top-0 before:left-0

Frequently Asked Questions

Yes, completely free with no sign-up. Convert unlimited CSS to Tailwind classes for your projects.

No, all conversion happens in your browser. Your CSS code never leaves your device.

We support the most common CSS properties. For properties without direct Tailwind equivalents, we suggest arbitrary values like w-[123px].