SeaGit UI

bySeaGit

Landing sample

Get the kit

CSS to Tailwind Converter

Paste CSS and get the equivalent Tailwind utility classes. The converter works declaration by declaration: named utilities where Tailwind has one, arbitrary values where it does not, and a clear list of anything it cannot convert. The default example is a card with a hover state and a breakpoint.

Use it to move a stylesheet into a Tailwind project, or to check what a hand-written rule would look like as classes. Review the output before you ship it; it is a faithful translation, not a refactor.

13 classes: 8 named utilities, 5 arbitrary. 0 item(s) skipped.
Tailwind classes
flex flex-col gap-3 py-4 px-6 rounded-[12px] bg-[#ffffff] shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)] text-base font-semibold text-[#1e293b] hover:bg-[#f8fafc] md:p-8

How to use it

  1. Paste CSS declarations (color: red;) or a rule (.card { ... }) into the input box.
  2. Read the class list. Named utilities are plain; arbitrary values are shown in brackets.
  3. Check the skipped list for anything that needs to be written by hand.
  4. Copy the class string into your markup, or the element className.

About the CSS behind it

Tailwind generates classes that each set one CSS declaration, and its documentation on custom styles describes arbitrary values with square brackets and arbitrary properties with the [property:value] form. Those two features are what let a converter stay exact when no named utility exists. Spaces inside a value are written as underscores.

Spacing is the most useful part of a conversion. The spacing scale is a multiple of 0.25rem, so padding: 16px becomes p-4, and padding: 8px 16px becomes py-2 px-4. Values off the scale, such as 13px, stay arbitrary so the rendered size does not change.

Variants keep state and breakpoints in the markup. A :hover rule becomes hover:bg-... and a min-width: 768px rule becomes md:.... The converter lists anything it does not map, including pseudo-elements such as ::before, which need before: and a content value written by hand.

Frequently asked questions

Does the converter produce exact Tailwind classes for every CSS property?
No. It maps common properties to named utilities (display, flex, spacing on the 0.25rem scale, named font sizes, weights, and so on). Anything without a named utility becomes an arbitrary value such as p-[13px], and properties the converter does not know become an arbitrary property such as [mask-type:luminance].
Which Tailwind version are the class names for?
Tailwind v4 names. Spacing uses the 0.25rem base scale that v3 and v4 share, so p-4 is 1rem in both. Some named utilities changed between versions, for example the rounded and shadow scales, so the converter uses arbitrary values for those to avoid version drift.
What happens to hover and media query rules?
Pseudo-classes such as :hover and :focus become variants (hover:, focus:), and min-width media queries become breakpoint variants (md:, lg:) when the width matches a default breakpoint. Other media queries, pseudo-elements, descendant selectors and at-rules are listed as skipped, so nothing is converted silently.
Is my CSS sent anywhere?
The conversion runs in your browser. The tool does not send the text you paste to a server.

Related tools and components