Guia CSS to Tailwind Online: Converter Propriedades CSS em Classes de Utilitario

What Is Tailwind CSS and Why Should You Migrate?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes like flex, pt-4, text-center, and rotate-90 directly in your HTML. Instead of writing custom CSS classes like .card-header-title, you compose styles from a set of constrained, single-purpose utilities.

Traditional CSS tends to grow unbounded over time. Every new feature adds new classes, specificity battles emerge, dead CSS accumulates, and refactoring becomes risky because you cannot tell which styles are still used. Tailwind solves these problems by co-locating styles with markup and automatically purging unused utilities in production.

Key benefits of migrating to Tailwind include: no naming fatigue (stop inventing names like .sidebar-nav-item-active), consistent design tokens (spacing, colors, and typography are constrained by the config), tiny production bundles (typically under 10 KB gzipped), rapid prototyping (style directly in HTML without switching files), and easy responsive design (breakpoint prefixes instead of media query blocks).

→ Try our free CSS to Tailwind converter now

CSS Property to Tailwind Class Mapping

The core of any CSS-to-Tailwind conversion is understanding how CSS properties map to utility classes. Here are the most common conversions you will encounter:

For display properties: display: flex becomes flex, display: grid becomes grid, display: block becomes block, display: inline-block becomes inline-block, display: none becomes hidden, and display: inline-flex becomes inline-flex.

For positioning: position: relative becomes relative, position: absolute becomes absolute, position: fixed becomes fixed, position: sticky becomes sticky. Top, right, bottom, left values use top-0, right-4, bottom-auto, left-1/2.

For sizing: width: 100% becomes w-full, height: 100vh becomes h-screen, max-width: 640px becomes max-w-xl, min-height: 100% becomes min-h-full.

For box model: padding: 16px becomes p-4, margin: 0 auto becomes mx-auto, border-radius: 8px becomes rounded-lg, box-shadow: 0 1px 3px rgba(0,0,0,0.1) becomes shadow-sm.

For text: font-size: 14px becomes text-sm, font-weight: 700 becomes font-bold, text-align: center becomes text-center, line-height: 1.5 becomes leading-normal, letter-spacing: 0.05em becomes tracking-wide.

/* Traditional CSS */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  margin: 0 auto;
  max-width: 640px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.card-body {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

<!-- Tailwind equivalent -->
<div class="flex flex-col p-4 mx-auto max-w-xl bg-white rounded-lg shadow-sm">
  <h3 class="text-lg font-bold mb-2">Title</h3>
  <p class="text-sm leading-relaxed text-gray-700">Body text</p>
</div>

Responsive Design: Media Queries vs Tailwind Breakpoints

One of Tailwind's most compelling features is how it handles responsive design. Instead of writing @media (min-width: 768px) { ... } blocks, you prefix any utility with a breakpoint modifier.

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes. Breakpoint prefixes apply at that width and above. The default breakpoints are: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

/* Traditional CSS: responsive container */
.container {
  padding: 8px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .container {
    padding: 16px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 24px;
    font-size: 18px;
    max-width: 1024px;
    margin: 0 auto;
  }
}

<!-- Tailwind equivalent (one line) -->
<div class="p-2 text-sm md:p-4 md:text-base lg:p-6 lg:text-lg lg:max-w-screen-lg lg:mx-auto">
  ...
</div>

This means text-sm md:text-base lg:text-lg starts small on mobile, increases at the md breakpoint, and increases again at lg. You can customize these breakpoints in tailwind.config.js under the screens key.

Flexbox and Grid: CSS vs Tailwind

Flexbox and Grid layouts are where Tailwind truly shines, replacing multi-line CSS blocks with a handful of utility classes.

For Flexbox: flex-direction: row becomes flex-row, flex-direction: column becomes flex-col, justify-content: center becomes justify-center, align-items: center becomes items-center, flex-wrap: wrap becomes flex-wrap, gap: 16px becomes gap-4.

/* CSS: Centered flex container */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

<!-- Tailwind -->
<div class="flex justify-center items-center gap-4 flex-wrap">

/* CSS: Sidebar layout */
.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar { width: 256px; flex-shrink: 0; }
.main { flex: 1; }

<!-- Tailwind -->
<div class="flex min-h-screen">
  <aside class="w-64 shrink-0">...</aside>
  <main class="flex-1">...</main>
</div>

For CSS Grid: grid-template-columns: repeat(3, 1fr) becomes grid-cols-3, grid-template-rows: auto 1fr auto becomes grid-rows-[auto_1fr_auto], grid-column: span 2 becomes col-span-2, gap: 24px becomes gap-6.

/* CSS: Responsive card grid */
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

<!-- Tailwind (one line) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

/* CSS: Dashboard grid */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 100vh;
}

<!-- Tailwind -->
<div class="grid grid-cols-[250px_1fr] grid-rows-[auto_1fr_auto] gap-4 min-h-screen">

Complex layout patterns like a responsive card grid only need one line: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6. In traditional CSS, this requires a media query block for each breakpoint.

Colors, Spacing, and Typography in Tailwind

Spacing in Tailwind follows a 4px base unit scale. p-1 equals 4px, p-2 equals 8px, p-4 equals 16px, p-8 equals 32px, and so on. The same scale applies to margin (m-), gap (gap-), width (w-), and height (h-). Negative values use a dash prefix: -mt-4 for margin-top: -16px.

Colors use a shade-based naming convention: text-blue-500, bg-gray-100, border-red-600. Shades range from 50 (lightest) to 950 (darkest). Opacity modifiers work inline: bg-black/50 for 50% opacity, text-white/80 for 80% opacity.

/* CSS: Custom colors and opacity */
.element {
  color: #1a73e8;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #dc2626;
}

<!-- Tailwind -->
<div class="text-[#1a73e8] bg-black/50 border-red-600">

/* CSS: Standard palette colors */
.success { color: #16a34a; }        /* text-green-600 */
.warning { color: #ca8a04; }        /* text-yellow-600 */
.error   { color: #dc2626; }        /* text-red-600 */
.info    { color: #2563eb; }        /* text-blue-600 */
.muted   { color: #6b7280; }        /* text-gray-500 */

Typography classes cover font size (text-xs through text-9xl), font weight (font-thin through font-black), line height (leading-none through leading-loose), letter spacing (tracking-tighter through tracking-widest), and font family (font-sans, font-serif, font-mono).

Custom Values with Arbitrary Value Syntax [...]

Tailwind's design system covers most common values, but real projects often need exact pixel values, specific colors, or unusual calculations. The arbitrary value syntax handles these cases by wrapping any CSS value in square brackets.

Examples: w-[calc(100%-2rem)] for calculated widths, p-[13px] for non-standard padding, text-[#1a73e8] for custom hex colors, bg-[rgb(255,100,50)] for RGB colors, grid-cols-[200px_1fr_200px] for custom grid columns (underscores replace spaces), top-[var(--header-height)] for CSS custom properties.

<!-- Arbitrary values in Tailwind -->

<!-- Exact pixel values -->
<div class="w-[327px] h-[200px] p-[13px] m-[7px]">

<!-- Calculated values -->
<div class="w-[calc(100%-2rem)] h-[calc(100vh-64px)]">

<!-- Custom colors -->
<div class="text-[#1a73e8] bg-[rgb(255,100,50)] border-[hsl(220,90%,56%)]">

<!-- CSS custom properties -->
<div class="bg-[var(--brand-color)] top-[var(--header-height)]">

<!-- Custom grid columns (underscores = spaces) -->
<div class="grid grid-cols-[200px_1fr_200px]">

<!-- Arbitrary properties (no utility exists) -->
<div class="[clip-path:circle(50%)] [writing-mode:vertical-rl]">

<!-- Arbitrary variants -->
<div class="[&>*:first-child]:mt-0 [&_p]:text-gray-700">

You can also use arbitrary properties for CSS properties that Tailwind does not have utilities for: [clip-path:circle(50%)], [writing-mode:vertical-rl]. This escape hatch means you never need to fall back to a separate stylesheet for one-off styles.

Tailwind Config: Extending vs Overriding

The tailwind.config.js file controls your design system. Understanding the difference between extend and direct configuration is crucial.

When you add values under theme.extend, they are merged with the default theme. Your custom values are added alongside the defaults. When you add values directly under theme (not inside extend), the defaults for that category are completely replaced.

// tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media'
  theme: {
    // EXTEND: adds to defaults (recommended)
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      spacing: {
        '18': '4.5rem',   // 72px
        '88': '22rem',     // 352px
      },
      fontFamily: {
        display: ['Inter', 'system-ui', 'sans-serif'],
      },
      borderRadius: {
        '4xl': '2rem',
      },
      screens: {
        '3xl': '1920px',  // extra-large breakpoint
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      animation: {
        fadeIn: 'fadeIn 0.3s ease-out',
      },
    },

    // OVERRIDE: replaces defaults entirely (use with caution)
    // colors: { ... }  <-- this would REMOVE all default colors
  },
  plugins: [],
};

For example, adding a custom color under theme.extend.colors keeps all default colors and adds yours. Adding colors directly under theme.colors removes all default colors and uses only yours. In most cases, you want to use extend to add to the defaults rather than replace them.

Dark Mode: CSS Media Queries vs Tailwind dark:

Tailwind provides a built-in dark mode system using the dark: prefix. Any utility can be conditionally applied in dark mode: bg-white dark:bg-gray-900, text-gray-900 dark:text-gray-100.

Tailwind supports two dark mode strategies. The media strategy uses the operating system's prefers-color-scheme preference automatically. The class strategy (also called selector in Tailwind v4) toggles dark mode based on a .dark class on a parent element, giving you manual control with JavaScript.

/* Traditional CSS: dark mode */
.card {
  background-color: white;
  color: #111827;
  border: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  .card {
    background-color: #1f2937;
    color: #f9fafb;
    border-color: #374151;
  }
}

<!-- Tailwind equivalent (inline, no media query needed) -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border border-gray-200 dark:border-gray-700">

<!-- Toggle dark mode with JavaScript (class strategy) -->
<script>
  // Add 'dark' class to <html> element
  document.documentElement.classList.toggle('dark');
</script>

<!-- Common dark mode patterns -->
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
  <nav class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">

In traditional CSS, implementing dark mode requires duplicating nearly every color declaration inside a @media (prefers-color-scheme: dark) block or managing CSS custom properties. With Tailwind, you declare both modes inline: bg-white dark:bg-slate-800 text-black dark:text-white. No separate stylesheet, no specificity issues.

Animations and Transitions in Tailwind

Tailwind includes utility classes for common CSS transitions and animations, reducing the need for custom keyframe definitions.

For transitions: transition enables transitions on common properties (color, background, border, shadow, transform, opacity). transition-colors, transition-opacity, transition-transform target specific properties. Duration uses duration-150, duration-300, duration-500 (in milliseconds). Easing uses ease-in, ease-out, ease-in-out, ease-linear. Delay uses delay-100, delay-200, etc.

/* CSS: Button hover transition */
.btn {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
.btn:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

<!-- Tailwind -->
<button class="transition-all duration-200 ease-in-out hover:bg-blue-600 hover:scale-105">

/* CSS: Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

<!-- Tailwind (using config-defined animation) -->
<div class="animate-fadeIn">

<!-- Built-in animations -->
<svg class="animate-spin h-5 w-5">        <!-- Loading spinner -->
<span class="animate-ping absolute ...">  <!-- Notification dot -->
<div class="animate-pulse bg-gray-200">   <!-- Skeleton loader -->
<div class="animate-bounce">              <!-- Scroll indicator -->

For transforms: scale-95, rotate-45, translate-x-4, skew-y-3 apply transforms directly. Combine with hover: for interactive effects: hover:scale-105 transition-transform duration-200.

For animations: Tailwind ships with animate-spin, animate-ping, animate-pulse, and animate-bounce. For custom keyframe animations, define them in tailwind.config.js under theme.extend.keyframes and theme.extend.animation, then use them as animate-[yourName].

When NOT to Use Tailwind

Tailwind is powerful, but it is not the right choice for every situation. Recognizing when traditional CSS is better saves time and frustration.

Migration Strategies: Gradual vs Full Rewrite

There are two main approaches to migrating an existing project from CSS to Tailwind: gradual migration and full rewrite.

Gradual migration (recommended for most projects): Install Tailwind alongside your existing CSS. Configure Tailwind to scan only the files you are actively converting. Migrate one component at a time, starting with the simplest leaf components. Once a component is fully converted, remove its old CSS. This approach is safe because both systems coexist, you can ship incrementally, and you can stop at any point.

# Gradual migration: Step-by-step

# 1. Install Tailwind alongside existing CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 2. Configure content paths (scan only files you are converting)
# tailwind.config.js
module.exports = {
  content: ['./src/components/new/**/*.{js,jsx,ts,tsx}'],
  // ...
};

# 3. Add Tailwind directives to your CSS entry point
# app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your existing CSS continues to work below */
@import './legacy-styles.css';

# 4. Convert one component at a time
# Before:  <div class="card-header">
# After:   <div class="flex items-center p-4 border-b border-gray-200">

# 5. Remove old CSS after each component is fully converted
# 6. Expand content paths as you convert more components

Full rewrite (suitable for small projects or complete redesigns): Replace all CSS files at once. This is faster for small projects but risky for large ones because you cannot ship partially. It works best when combined with a visual redesign, so you are rebuilding the UI anyway.

Regardless of approach, use automated tools to speed up the mechanical translation. Our CSS to Tailwind converter handles the property-to-utility mapping, letting you focus on component structure and responsive behavior.

→ Try the CSS to Tailwind converter now

Frequently Asked Questions

Conclusion

Migrating from CSS to Tailwind is a strategic investment that pays off with smaller bundles, faster development, and consistent design. Start with an automated converter for the mechanical translation, then refine component by component. For new components, write Tailwind from scratch. For legacy code, migrate gradually. The result is a codebase where styles are co-located with markup, dead CSS is eliminated automatically, and responsive design is expressed inline rather than in separate media query blocks.

Convert your CSS to Tailwind classes instantly with our free tool.