PickCode Add to Chrome
  1. Home
  2. Free tools
  3. CSS to Tailwind converter

CSS to Tailwind converter

Paste CSS, see it rendered, and get Tailwind classes back, including hover: and md: variants. It runs the same engine as the PickCode extension, inside your browser.

Try an example
Tailwind classes

    Copy from live websites instead

    PickCode turns any element on any page into Tailwind, React, Blade or HTML + CSS in one click. 5 free elements a day.

    Add to Chrome, free

    What the converter does

    Theme names first
    Colors, spacing, radii and font sizes snap to Tailwind's default scale, like bg-indigo-600 or px-5. Anything off-scale becomes an exact value such as rounded-[10px].
    States and breakpoints
    :hover, :focus and :active rules become hover: and focus: classes. min-width media queries become sm: to 2xl:.
    Resolved like a browser
    Your CSS is applied to a hidden element first, so shorthands, named colors and rem values resolve exactly as Chrome resolves them.
    Stays on your machine
    Nothing you paste is uploaded. The conversion runs in this tab.

    Every rule you paste is treated as the same element. To convert a whole component with its children, copy it from the page with the extension.

    More free tools