Should You Import Tailwind CSS in App.css or index.css?

If you've just set up a React project and you're staring at both App.css and index.css wondering where to drop your Tailwind directives — you're not alone. It's one of those small decisions that feels trivial but can quietly affect how your project scales. The answer depends on how your project is structured, what framework you're using, and how you expect your styles to load.

What the Tailwind Directives Actually Do

When you add Tailwind to a project, you typically include three directives in a CSS file:

@tailwind base; @tailwind components; @tailwind utilities; 

These aren't standard CSS imports — they're instructions that Tailwind's PostCSS plugin processes at build time. The result is a generated stylesheet containing all the base resets, component classes, and utility classes your project uses (or, with purging enabled, only the ones it actually needs).

The key point: these directives need to appear in a CSS file that gets imported into your JavaScript entry point — the file that kicks off your entire app. That's what makes the styles globally available across every component.

What index.css and App.css Are Actually For

Understanding the conventional purpose of each file helps clarify the decision.

index.css is typically imported inside index.js (or main.jsx in Vite projects). Because index.js is the root entry point of the application, anything imported there loads first and applies globally — before React even mounts your component tree.

App.css is imported inside App.js (or App.jsx), which is your root component. Styles here are still global (CSS doesn't scope itself automatically), but they're loaded slightly later in the module graph, after the entry point has already initialized.

Why index.css Is the More Common Choice

Most Tailwind documentation and community setups place the directives in index.css, and there's a practical reason: global utility frameworks belong at the global entry point. Tailwind's base layer includes CSS resets that should apply before anything else renders. Importing at the entry level ensures those resets are in place from the moment the DOM starts building.

In a Vite + React project, main.jsx imports index.css directly:

import './index.css' import App from './App' 

This means the Tailwind styles are available to every component in the tree without any additional imports — including App.jsx itself.

When App.css Might Be Used Instead

Some developers place Tailwind directives in App.css and it works fine in practice, because modern bundlers like Vite and webpack resolve CSS in module order, and the styles end up in the same compiled output regardless. There's no functional breakage in most setups.

That said, there are scenarios where the distinction matters more:

• If you're adding Tailwind to an existing project that already has global styles in index.css, you might choose App.css to keep concerns separated during migration — though this can create ordering issues between Tailwind's base resets and your existing resets.
• If you use CSS Modules for component-level styles, you may want Tailwind's global directives clearly isolated in a non-module file. index.css is usually cleaner for this.
• If you have a monorepo or micro-frontend setup, where multiple entry points exist, you'll want to be more deliberate about where global styles live to avoid duplication or conflicts.

The Ordering and Specificity Angle 🎯

One underappreciated factor is CSS cascade order. Tailwind's utility classes are designed to be highly specific and generally override base styles — but if you have custom global CSS that also targets bare elements, the order those files load in can affect which styles win.

Placing Tailwind in index.css (loaded first) and keeping your custom overrides in App.css (loaded after) gives you a predictable cascade: Tailwind sets the foundation, your styles build on top. Flip that order and you may find your custom styles getting unexpectedly overridden.

Framework-Specific Behavior Worth Knowing

• Create React App (CRA): Both files work, but index.css is imported in index.js by default, making it the natural home for Tailwind.
• Vite + React: Same pattern — main.jsx imports index.css. This is where Tailwind's official Vite guide places the directives.
• Next.js: Neither App.css nor index.css applies directly. Global CSS must go in a file imported inside _app.js (Pages Router) or layout.js (App Router) — typically a file named globals.css.
• Vue (Vite): Tailwind directives usually go in style.css or main.css, imported in main.js.

The Variables That Shape Your Decision 🔧

Where the "right" answer lands depends on factors specific to your project:

• Which framework and bundler you're using
• Whether you're starting fresh or adding Tailwind to an existing codebase with established CSS conventions
• Whether you use CSS Modules or global stylesheets throughout the project
• How many entry points your app has
• What other global styles already exist and where they're currently imported

A greenfield Vite + React project has a very different set of constraints than a legacy CRA app being migrated, or a Next.js project following App Router conventions. The mechanics of where Tailwind's directives land — and whether that placement causes cascade or ordering issues — shifts meaningfully depending on what's already in place around it.