/* .card */ flex flex-col items-center justify-between p-6 my-4 mx-auto w-full max-w-lg bg-white rounded-lg shadow-md overflow-hidden /* .card-title */ text-2xl font-bold text-[#1f2937] mb-2 leading-tight /* .card-btn */ inline-flex items-center py-2 px-4 bg-[#3b82f6] text-white rounded-md text-sm font-medium cursor-pointer transition-all
You Might Also Like
CSS to Tailwind Converter — Convert CSS to Utility Classes Online
About this tool
What Is This CSS to Tailwind Converter?
This is a free, browser-based CSS to Tailwind CSS converter that takes standard CSS declarations and maps them to the closest equivalent Tailwind utility classes in real time. Paste any CSS — bare property-value pairs, full rule blocks with selectors, or an entire stylesheet — and the right panel instantly shows the corresponding Tailwind classes. It supports over 100 CSS properties including every flexbox property, every grid property, all margin and padding shorthands, width, height, min/max sizes, font-size, font-weight, line-height, letter-spacing, text-align, colors, border, border-radius, box-shadow, overflow, opacity, cursor, transitions, and transforms. The converter runs entirely in your browser — no server request, no sign-up, no file size limit.
The key differentiator of this CSS to Tailwind tool is how it handles values that fall outside Tailwind's default scale. Most online CSS to Tailwind converters either skip these values or produce invalid output. This converter uses Tailwind's arbitrary value syntax to handle any value that has no exact class match — so a width of 420px becomes w-[420px], a custom color like #2d5be3 becomes text-[#2d5be3], and a font-size of 17px becomes text-[17px]. The output is always valid Tailwind, even for design tokens that do not align with the default scale. Arbitrary values are highlighted in amber in the output panel so you can easily identify which classes are standard utilities versus custom values.
Converting CSS to Tailwind is one of the most frequent tasks when migrating an existing project to a Tailwind-based architecture. A component that was originally written with a custom stylesheet needs its selectors identified, its property-value pairs mapped to utility classes, and any non-standard values wrapped in arbitrary value syntax. Doing this manually across dozens of components is tedious and error-prone. This tool automates the mechanical conversion step — paste the original CSS rule, get the Tailwind class string in seconds, and paste it into your JSX className or HTML class attribute. The three output formats — Classes (just the string), HTML (wrapped in a div), and JSX (wrapped with className) — mean you can paste directly into any target without reformatting.
The converter also handles @media query rules by detecting the at-rule and recursively processing the nested declarations, outputting them with the media context shown in a comment. This covers the common pattern of component stylesheets that already use breakpoint queries, making it possible to convert responsive CSS directly rather than having to extract the declarations manually. File upload and drag-and-drop support means you can convert entire .css files without copy-pasting their contents.
Features
- Converts 100+ CSS properties to Tailwind utility classes — display, position, flexbox, grid, spacing, sizing, typography, colors, borders, effects, and more
- Arbitrary value fallbacks for any value outside Tailwind's default scale — w-[420px], text-[#3b82f6], gap-[18px], etc.
- Parses full CSS rules with selectors (e.g. .card { ... }) and outputs selector as a comment above the class list
- @media query detection — nested declarations are processed and output with the media context annotated
- Three output formats: Classes (plain string), HTML (div with class=""), JSX (div with className="")
- CSS syntax highlighting in the input panel — selectors, properties, values, and at-rules all highlighted
- Tailwind output highlighting — arbitrary value classes highlighted in amber to distinguish from standard utilities
- Live conversion — output updates as you type with no delay
- File upload and drag & drop for .css files — convert entire stylesheets at once
- One-click Copy and Download for the converted output
- 100% client-side — no CSS is ever sent to a server, no sign-up required
How to Use
Paste your CSS into the left input panel. You can paste bare property-value declarations like display: flex; align-items: center; padding: 16px; or full CSS rule blocks like .card { display: flex; padding: 24px; background: #fff; border-radius: 8px; }. The converter automatically detects which format you are using and handles both. If you paste a full rule block, the selector (.card in this example) is output as a comment above the Tailwind class list so you know which class string corresponds to which rule.
The right panel updates live as you type — you do not need to click a button to run the conversion. The Tailwind utility classes appear immediately. Use the three tabs at the top right of the output panel to switch output format. Classes gives you the raw class string ready to paste into any className or class attribute. HTML wraps the classes in a <div class="..."> element for quick HTML prototyping. JSX wraps them in <div className="..."> for React/Next.js components.
For any CSS value that does not have an exact Tailwind match — a custom pixel size, a hex color, an unusual font size — the converter generates an arbitrary value class using Tailwind's square-bracket syntax. For example, border-radius: 12px becomes rounded-[12px], and background-color: #2d5be3 becomes bg-[#2d5be3]. Arbitrary value classes are highlighted in amber in the output panel so you can quickly identify which values are using custom tokens rather than Tailwind's default scale.
Click Upload in the toolbar or drag and drop a .css file onto the input panel to load a full stylesheet. The file contents appear in the editor and conversion runs immediately. This is useful when migrating a complete component stylesheet or a design system CSS file. After conversion, click Copy to copy the output to your clipboard or Download to save it as a .txt file for reference.
For migrating an existing project to Tailwind, the recommended workflow is: open each component's stylesheet, paste each rule block into this converter one at a time, take the Classes output, and paste it into the corresponding JSX className. Remove the now-redundant CSS file once all rules are converted. Pay attention to amber-highlighted arbitrary values — these are places where your design tokens don't align with Tailwind's default scale and may be good candidates for extending your tailwind.config.js theme.
Common Use Cases
Frequently Asked Questions
The converter supports over 100 CSS properties including all display values, position, overflow, visibility, flexbox (flex-direction, flex-wrap, justify-content, align-items, align-content, align-self, flex-grow, flex-shrink, flex-basis, gap, order), CSS Grid (grid-template-columns, grid-column, grid-row, col-span), all margin and padding shorthands and individual sides, width, height, min-width, max-width, min-height, max-height, font-size, font-weight, font-family, text-align, line-height, letter-spacing, colors (text, background, border), border-width, border-style, border-radius, box-shadow, opacity, z-index, cursor, overflow, transitions, and transforms.
Any CSS value that doesn't have an exact match in Tailwind's default scale is output using Tailwind's arbitrary value syntax — square brackets containing the original value. For example, padding: 18px becomes p-[18px], color: #2d5be3 becomes text-[#2d5be3], and border-radius: 12px becomes rounded-[12px]. Arbitrary value classes are highlighted in amber in the output panel so you can spot them immediately. The output is always valid Tailwind — you can paste it directly into a project using Tailwind v3 or v4 without any modification.
Yes. Paste a complete CSS rule block like .card { display: flex; padding: 24px; border-radius: 8px; } and the converter detects the selector (.card), outputs it as a comment above the resulting class list, and processes all the declarations in the block. You can also paste multiple rule blocks at once and each is processed independently with its selector annotated. Bare declarations without selectors are also accepted and converted directly.
Three output formats are available. Classes outputs just the utility class string — for example flex items-center p-6 rounded-lg bg-white — ready to paste directly into a class or className attribute. HTML wraps the classes in a <div class="..."> element useful for quick HTML prototyping. JSX wraps them in a <div className="..."> element ready for React, Next.js, or any JSX-based framework. Switch between them using the tabs at the top right of the output panel.
Yes. The parser detects @media at-rules and recursively processes the nested declarations, outputting each rule with the media context shown in an annotated comment. This handles the common pattern of responsive component stylesheets that already use breakpoint queries. Note that the output does not automatically add Tailwind responsive prefixes (sm:, md:, lg:) — it annotates the media context so you can add the appropriate Tailwind prefix to each class manually.
Named CSS colors like red, blue, and green are mapped to approximate Tailwind palette names such as red-500 or blue-600. Hex codes and rgb/hsl values are output as arbitrary values like text-[#1f2937] since exact palette matching requires knowing the original design token. If you're migrating to Tailwind and want to use palette classes instead of arbitrary color values, use this tool to identify all your color values, then manually map them to the closest Tailwind palette color in your theme config.
Yes. Click the Upload button in the toolbar to open a file picker and select any .css file, or drag and drop a .css file directly onto the input panel. The file contents are loaded into the editor and conversion runs immediately. This is useful for converting complete component stylesheets or design system CSS files without copy-pasting their contents. After conversion, use the Download button to save the output as a reference file.
No. All conversion logic runs entirely in your browser using JavaScript. Your CSS is never transmitted to any server, never stored in any database, and never logged. This makes the tool safe to use with internal stylesheets, proprietary component code, client work, and any CSS that you would prefer not to share with a third-party service. The tool also works fully offline once the page has loaded.
The converter generates standard Tailwind utility class names and arbitrary value syntax that is compatible with Tailwind v3 and v4. Tailwind v4 changed the configuration format and some class naming conventions for certain utilities, so a small number of class names may differ. For the vast majority of common properties — spacing, typography, colors, flexbox, grid — the output is identical between v3 and v4.
The recommended migration workflow: (1) Open each component's CSS file. (2) Paste each rule block into this converter one at a time. (3) Use the Classes output and paste it into the corresponding JSX className or HTML class attribute. (4) Check amber-highlighted arbitrary values — these are non-standard design tokens that may be worth normalizing to your tailwind.config.js theme scale. (5) Delete the original CSS rule once it is converted. (6) After all rules are migrated, remove the empty CSS file. This approach converts the mechanical part of the migration automatically while leaving the design decisions about arbitrary values to you.