GigaCode logo GigaCode

Developer tools, fast and local, because your privacy matters.

QR Code Generator CPF/CNPJ Generator JSON Formatter & Validator Fluff text generator JWT Decoder SQL Formatter Text diff CSS Units Converter Base64 Encoder/Decoder SVG to PNG or JPEG converter JPG/PNG ↔ WebP converter Image resizer Grayscale image filter

CSS to Tailwind classes

Heuristic mapping of common CSS declarations to Tailwind v3 utilities and arbitrary values. Review in your project.

{{ t("cssToTailwindHint") }}

{{ cssToTailwind.message }}

Overview

Adam Wathan launched Tailwind CSS in 2017 — first as a controversial article called 'CSS Utility Classes and Separation of Concerns' on his blog, then as an actual library. The reception was divided. A portion of the CSS community rejected the idea vigorously: it was inline CSS in disguise, a violation of separation of concerns, templates that would become an unreadable mess of classes. Wathan answered each objection with practical arguments about maintenance at scale, and time proved him right. Between 2022 and 2024, Tailwind became the most widely used CSS tool in the world according to the State of CSS survey — with adoption by companies like GitHub, Shopify, and Vercel.

The core philosophy is to invert the mental model of CSS. Instead of creating semantic classes like `.primary-button` that encapsulate properties, you compose styles directly in the HTML with atomic classes: `bg-blue-500 text-white px-4 py-2 rounded`. It looks verbose at first glance. In practice, it means you never need to invent class names (the most underestimated work in CSS), the production CSS file is typically between 5 KB and 20 KB thanks to the JIT compiler, and modifying the style of one element never unexpectedly affects other elements.

This conversion tool performs heuristic mapping of common CSS declarations to equivalent Tailwind classes. It reads `property: value` declarations (with or without `{}` blocks), ignores comments, and suggests utilities like `flex`, `justify-center`, spacing scales (`p-4`, `gap-6`), or arbitrary values (`[margin:12px]`). The result is a starting point — breakpoints (`sm:`, `md:`), states like `hover:`, and variants like `dark:` need to be added manually, because they depend on your project's design context.

Technical deep dive

Utility-first CSS: the approach that divided the front-end community

  • The idea of utility classes did not start with Tailwind. Nicole Sullivan presented OOCSS (Object-Oriented CSS) in 2008, arguing that HTML and CSS should be decoupled with reusable classes. Thierry Koblentz went further in 2013 with Atomic CSS: one class per CSS declaration. Both were criticized for the same reasons Tailwind would be criticized four years later.
  • The main argument against is coupling between HTML and styles: using `bg-blue-500 text-white px-4 py-2 rounded` directly in the HTML couples presentation to markup. If you need to change the button style, you need to update every occurrence in the HTML. Wathan's argument: that coupling always existed — what changed is where it lives. With semantic CSS, the `.primary-button` class in the HTML depends on the CSS that defines it; moving the CSS file does not move the HTML. The coupling is bilateral either way.
  • The main argument in favor is predictability: a Tailwind class like `p-4` always means `padding: 1rem`. There is no 'add a property to `.card` and break `.card-news` layout' syndrome, because classes do not inherit from each other. Each element has exactly the styles its classes describe.
  • Companies that migrated to Tailwind at scale consistently report reduced CSS bundle size (from hundreds of KB to under 20 KB with PurgeCSS/JIT), faster prototyping, and fewer conflicts in large teams. GitHub migrated part of its frontend to Tailwind in 2021.
  • The most valid remaining criticism: HTML with many Tailwind classes can become hard to read. The standard solution is components (React, Vue, Svelte) or `@apply` in CSS to group classes that always appear together. Tailwind was designed to work with componentization — not as an architecture replacement.

Design tokens and Tailwind's numeric scale system

  • Tailwind's spacing system uses a base unit of 0.25 rem (4px by default). `p-1` = 4px, `p-2` = 8px, `p-4` = 16px, `p-8` = 32px, `p-16` = 64px. The scale is deliberately non-linear past certain values to cover the most common design sizes with fewer classes.
  • Tailwind's color palette has 22 base colors (slate, gray, zinc, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, neutral), each with scales from 50 to 950. That yields 220+ color variations out of the box — more than most design systems need.
  • Default breakpoints are mobile-first: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px). No-prefix classes apply to all sizes. `md:flex` means 'apply `display: flex` only on screens 768px or wider'. The opposite of Bootstrap's approach, which used `col-xs-` as the base size.
  • Arbitrary values are the escape hatch for when the default scale does not fit: `w-[847px]`, `text-[13px]`, `bg-[#1a2b3c]`, `grid-cols-[1fr_2fr_1fr]`. They are compiled by JIT and do not increase the production bundle — only classes actually used in the code enter the final CSS.
  • Customization lives in `tailwind.config.js` under `theme.extend`. You can add brand colors, custom fonts, design-system-specific spacing, additional breakpoints, and plugins. `extend` adds to the defaults; replacing `theme` directly removes them.

Code Snippets

CSS → Tailwind mapping (quick reference)
/* DISPLAY AND LAYOUT */
display: flex              → flex
display: grid              → grid
display: none              → hidden
justify-content: center    → justify-center
align-items: center        → items-center
flex-direction: column     → flex-col
gap: 1rem                  → gap-4

/* SPACING (base: 0.25rem = 4px) */
padding: 1rem              → p-4
padding-top: 0.5rem        → pt-2
margin: 0 auto             → mx-auto
margin-bottom: 1.5rem      → mb-6

/* TYPOGRAPHY */
font-size: 1.125rem        → text-lg
font-weight: 700           → font-bold
line-height: 1.5           → leading-normal
text-align: center         → text-center

/* VISUAL */
background-color: #3b82f6  → bg-blue-500
border-radius: 0.375rem    → rounded
border-radius: 9999px      → rounded-full
box-shadow: ...            → shadow-md
opacity: 0.5               → opacity-50
tailwind.config.js with custom theme
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,php}',
  ],
  theme: {
    extend: {
      // Brand colors
      colors: {
        brand: {
          50:  '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
        danger: '#ef4444',
      },
      // Additional spacing
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },
      // Custom fonts
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),  // prose class
    require('@tailwindcss/forms'),        // form element styles
  ],
};

Sample 

display: flex;
justify-content: center;
padding: 16px;

FAQ

What is this tool for?

It runs fully in your browser: useful to validate, format, or convert data in everyday development.

Are my inputs sent to a server?

Processing happens locally with JavaScript. We do not store what you paste into the text areas.

Can I use this for real production data?

Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.

GigaCode global FAQ