0PricingLogin▼
Tailwind CSS Academy · Lesson

Coexisting With Legacy CSS

Integrate Tailwind into an existing project with legacy CSS or another framework, managing specificity conflicts and incremental migration.

The Coexistence Challenge

Many real-world projects cannot rewrite all existing styles at once. You might inherit a project using Bootstrap, a homegrown CSS framework, or thousands of lines of plain CSS. Introducing Tailwind into such a project means both systems must coexist without breaking each other. Understanding specificity, class naming collisions, and layer ordering is essential for a smooth incremental migration.

Understanding CSS Specificity Conflicts

Tailwind utilities use single-class selectors with specificity 0,1,0. Legacy CSS often uses descendant selectors like .header .nav a with higher specificity. When both styles target the same element, the higher-specificity legacy rule wins regardless of source order. This means a Tailwind utility like text-blue-600 may appear to do nothing if a legacy descendant rule overrides it.

/* Legacy CSS — specificity 0,2,1 */
.header .nav a {
  color: #333333;
}

/* Tailwind utility — specificity 0,1,0 */
/* .text-blue-600 { color: #2563eb; } */

<!-- This Tailwind class LOSES because legacy has higher specificity -->
<header class="header">
  <nav class="nav">
    <a class="text-blue-600">Will still be #333333</a>
  </nav>
</header>

All lessons in this course

  1. File and Folder Organization
  2. Coexisting With Legacy CSS
  3. CSS Modules and Tailwind
  4. Scaling Tailwind Across Monorepos
← Back to Tailwind CSS Academy