Tailwind CSS is a utility-first CSS framework where you style elements by composing small, single-purpose utility classes directly in HTML. Instead of writing .card { padding: 1rem; border-radius: 0.5rem; }, you write class="p-4 rounded-lg". This approach has become extremely popular, but it assumes your project uses Tailwind's build pipeline.
When You Need to Convert Tailwind to CSS
Sharing components across projects where not all use Tailwind requires plain CSS versions of your components. Migrating from a Tailwind project to a non-Tailwind framework means extracting CSS from Tailwind class names. Contributing to open-source projects that do not use Tailwind requires translating your Tailwind-based designs. Teaching CSS fundamentals using Tailwind components as examples requires understanding what CSS each class produces.
How Tailwind Classes Map to CSS
Tailwind's class names follow a consistent naming convention. The prefix describes the CSS property and the value describes the scale. p-4 means padding with a size-4 value from the spacing scale (1rem by default, which is 16px). text-lg means font-size large (1.125rem). rounded-xl means border-radius extra-large (0.75rem). shadow-md means box-shadow medium.
Color classes follow the format property-color-shade. bg-blue-500 means background-color with the 500 shade of blue from Tailwind's default color palette. text-gray-700 means color gray at the 700 shade.
Responsive prefixes (sm:, md:, lg:, xl:) translate to media queries at Tailwind's default breakpoints (640px, 768px, 1024px, 1280px). The class md:flex becomes @media (min-width: 768px) { display: flex; }.
State variants (hover:, focus:, active:) translate to CSS pseudo-class selectors.
Using the DevHexLab Tailwind Class Converter
Open the tool at /tools/css/tailwind-class-converter. Type the Tailwind class names separated by spaces. The tool shows the equivalent CSS properties for each class. Copy the CSS output.
Frequently Asked Questions
Does Tailwind have a way to export CSS natively?
Yes. Running a Tailwind build with the --css flag produces a CSS file. But this generates the full Tailwind base, components, and utilities CSS, which includes everything, not just the classes you used. The converter tool shows only the CSS for specific classes.
Is there a performance difference between Tailwind and plain CSS?
Both are CSS at the end of the day. The difference is in how the CSS is written and maintained, not in runtime performance.
Understand what Tailwind classes mean and you understand CSS more deeply.