Tailwind v3 preflight conflicts with Tailwind v4 preflight (border/margin/padding utilities broken)

[amh6281]

Hi Tailwind team 👋

I'm facing a compatibility issue when importing a precompiled design system built with Tailwind v3 into a project using Tailwind v4.

Setup

• App uses Tailwind v4
• Imported package CSS (built with v3) includes its own @tailwind base

// App.tsx
import 'design-system/dist/assets/style.css';

Problem

Once imported, several Tailwind v4 utilities stop working properly — e.g.:

// Test.tsx
<div class="border border-red-500 pl-4 mr-4">test</div>

• border-color appears as neutral instead of red-500
• m- / p- utilities behave inconsistently

Cause

Tailwind v3 preflight sets global border defaults:

*, ::before, ::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

Tailwind v4’s preflight, however, resets borders differently:

*, ::after, ::before {
  border: 0 solid;
  margin: 0;
  padding: 0;
}

The v3 preflight overrides v4’s expectations, breaking CSS variable–based utilities like border-red-500.

Temporary workaround

As a temporary fix, I’m using the following override to revert the v3 preflight impact:

// index.css (my_project)
*:not(svg):not(svg *) {
  border: revert-layer;
  margin: revert-layer;
  padding: revert-layer;
}

This restores most v4 utility behavior, but it’s not ideal or sustainable.

Questions

• Is there a recommended way to coexist a precompiled Tailwind v3 CSS with Tailwind v4 without editing the package?
• Would disabling preflight in the design system (corePlugins.preflight = false) be a safe solution?
• Are there best practices for scoping or isolating compiled Tailwind CSS (e.g. layer scoping, prefixes, shadow DOM, import order)?
• Is there any migration guidance or compatibility layer for legacy Tailwind builds?

Thanks for your time and guidance 🙏