Migreren van CSS naar Tailwind: Een praktische gids

Tailwind CSS has become one of the most popular CSS frameworks, offering a utility-first approach that eliminates the need for custom class names and separate stylesheet files. If you're considering migrating an existing project from traditional CSS to Tailwind, this guide walks you through the process.

Convert CSS to Tailwind classes instantly with our free tool →

Why Migrate to Tailwind?

Traditional CSS tends to grow unbounded over time. Every new feature adds more classes, specificity battles emerge, and dead CSS accumulates. Tailwind solves these problems:

Common Property Mappings

Here are the most frequently used CSS properties and their Tailwind equivalents:

/* 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);
}

<!-- Tailwind equivalent -->
<div class="flex flex-col p-4 mx-auto max-w-2xl bg-white rounded-lg shadow-sm">
  ...
</div>

Responsive Design

One of Tailwind's biggest advantages is how intuitive responsive design becomes. Instead of writing media queries, you prefix utilities with breakpoint modifiers:

/* Traditional CSS */
.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;
  }
}

<!-- Tailwind equivalent -->
<div class="p-2 text-sm md:p-4 md:text-base lg:p-6 lg:text-lg">
  ...
</div>

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes. Breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) apply at that breakpoint and above.

Colors and Spacing

Tailwind provides a consistent spacing scale and color palette out of the box:

Spacing scale: Tailwind uses a 4px base unit. p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px. Use arbitrary values with square brackets: p-[13px] for non-standard values.

Colors: Use the built-in palette (text-blue-500, bg-gray-100) or arbitrary values (text-[#1a73e8], bg-[rgb(255,0,0)]). Opacity modifiers work inline: bg-black/50 for 50% opacity.

/* CSS colors and spacing */
.alert {
  color: #dc2626;
  background-color: #fef2f2;
  padding: 12px 16px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
}

<!-- Tailwind -->
<div class="text-red-600 bg-red-50 py-3 px-4 border border-red-300 rounded-md">
  ...
</div>

<!-- With arbitrary values when needed -->
<div class="text-[#dc2626] bg-[#fef2f2] p-[12px_16px] border border-[#fca5a5] rounded-[6px]">
  ...
</div>

Flexbox and Grid Conversion

Flexbox and Grid layouts are where Tailwind really shines. Here's how common layout patterns translate:

/* CSS: Centered flex container */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
<!-- Tailwind -->
<div class="flex justify-center items-center gap-4">

/* CSS: Space-between header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
<!-- Tailwind -->
<header class="flex justify-between items-center py-4 px-6">

/* CSS: Responsive grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
<!-- Tailwind -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

When Not to Convert

Tailwind is powerful, but there are cases where keeping traditional CSS makes more sense:

Automate the Conversion

Manually translating CSS properties to Tailwind classes is time-consuming, especially for large stylesheets. Our CSS to Tailwind converter instantly maps your CSS to the equivalent Tailwind utility classes, saving you hours of manual work.

Try the CSS to Tailwind converter now →