Should I Import Tailwind CSS to app.css or index.css? Written on Feb 17, 2026. Posted in Tailwind CSS.

Many developers get stuck at this small but confusing step, when installing Tailwind CSS for the first time:

Do I put Tailwind in app.css or index.css?

This might not sound big; but choosing the wrong place is one of the biggest reasons Tailwind "doesn't work", missing styles in developement and production.

Let's have a look why this happen.

The short answer

Always import Tailwind in the main stylesheet, which is loaded by your app when a user visits your application.

Usually that means:

React / Vite / Vue → index.css
Next.js → globals.css
Some .NET or server frameworks → app.css (because that file acts as the global stylesheet)

So the real rule is not the filename.
The rule is: use the root CSS file loaded at the entry of your application.

Why placement matters

Tailwind CSS is different from Bootstrap or any other CSS libraries.

It does NOT ship with ready-made CSS.
Instead, it generates CSS during build time using PostCSS.

You don’t import styles, you give instructions:

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

Then Tailwind scans your project and builds a final stylesheet containing only the classes you actually used.

That's why Tailwind must run onace at the top level of your project.

If you put it in the wrong place, the build system either:

processes it multiple times
processes it zero times
or don't add any styles

When to use index.css

In most frontend frameworks, index.css is the global stylesheet.

Examples:

React (Vite or CRA)
Vue
Svelte
Plain HTML

You typically import it in the entry file:

import './index.css'

And inside index.css:

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

This makes Tailwind available everywhere in your app.

When to use app.css

Some frameworks use a different name for the global stylesheet.

For example:

ASP.NET
Blazor

In those projects, app.css is loaded once for the entire site, so it becomes your Tailwind entry file.

So yes, sometimes app.css is correct; but only when it acts as the global stylesheet.

What happens if you choose the wrong file

Here are the most comman symptoms:

Problem	What it means
Classes don't apply	Tailwind never ran
Works in dev but broken in production	Build scanned wrong files
Huge CSS file	Tailwind generated multiple times
Random overrides	Loaded after component styles

Almost every "Tailwind not working" question on Google comes from this mistake.

How to quickly find the correct file

Open your website, inspect and search for <head> tag.

Find the main stylesheet:

 <link rel="stylesheet" href="/assets/index.css">

That file is where Tailwind belongs.

Tailwind v4 (New syntax)

Newer Tailwind versions allow a simpler import:

@import "tailwindcss";

Older versions still use:

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

Both are fine, placement matters more than syntax.

Beginner checklist

Follow this and Tailwind will work 99% of the time:

Install Tailwind CSS
Configure tailwind.config.js content paths
Add Tailwind directives to global CSS file
Import that file once in your app entry
Never import Tailwind inside components

FAQ

Should I import Tailwind in every component?

No. Tailwind is global. Use the classes directly.

Why are my styles missing in production?

Your content paths in tailwind.config.js are wrong or Tailwind was imported in the wrong file.

Can I mix Tailwind with CSS Modules?

Yes. Keep Tailwind global and modules local.