Where to Import Tailwind CSS in Your Project

Import Tailwind CSS into your global CSS file, not your app component file

The short answer: put your Tailwind import in index.css (or whatever global stylesheet loads first in your project), not in App.css or App.js. Tailwind needs to run once, early, and affect your entire page. If you import it in App.css or App.js, you're importing it inside a component that may load late or load multiple times, which wastes resources and can cause styling to flicker or fail.

The reason comes down to how CSS and JavaScript load. Your index.css (or main.css) is a global file that runs before anything else. Your App.css is scoped to a single component. Tailwind's job is to inject its base styles, component classes, and utilities into the entire page — it needs to happen once, at the top level, before your components render.

Key Takeaways

Import Tailwind in your global CSS file (index.css, main.css, or styles.css) that loads before your app starts, not in a component-level CSS file.
Tailwind's base styles and utilities need to be available to every component on the page, so they must load at the global level.
If you import Tailwind in App.css or App.js, it loads inside a component and may not reach all parts of your page or may load multiple times unnecessarily.
Your HTML file should link to the global CSS file in the <head> tag before your JavaScript bundle loads.

How global CSS files work in a web project

When your browser loads a web page, it reads the HTML file first. Inside the <head> tag, it finds a <link> tag pointing to your CSS file — usually something like <link rel="stylesheet" href="index.css">. The browser downloads and applies that CSS to the entire page before it even starts running your JavaScript.

After the CSS loads, the browser runs your JavaScript bundle. That bundle contains your React (or Vue, or Angular) code, which builds your components and renders them to the page. By the time your components appear, the global CSS is already there, waiting to style them.

This order matters. If you put your Tailwind import inside a component file, it doesn't load until that component loads — which might be after the page has already started rendering, or it might load multiple times if the component re-renders.

Why Tailwind needs to be global

Tailwind CSS is a utility-first framework that provides thousands of small classes you can use in your HTML — classes like flex, text-center, bg-blue-500, and so on. When you import Tailwind, it generates all of those classes and injects them into your page's stylesheet. This happens once, at import time.

If you import Tailwind inside App.js or App.css, you're telling it to generate all those classes only when the App component loads. But your page might have components that load before App, or components that exist outside App's scope. Those components won't have access to Tailwind's classes until App loads — and if App loads late, you'll see unstyled content flicker on the screen.

By importing Tailwind in index.css, you may provide that every Tailwind class is available to every component on the page, from the moment the page loads.

The correct import statement and file location

In your global CSS file (index.css, main.css, or styles.css — the name doesn't matter, only that it's global), add this line at the very top:

@import 'tailwindcss/tailwind';

Or, if you're using Tailwind 3 or later, you may see this instead:

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

Both do the same thing: they tell Tailwind to generate its styles and inject them into your page. The exact syntax depends on how you set up Tailwind in your project — your Tailwind configuration file (tailwind.config.js) controls this.

Your HTML file should link to this global CSS file in the <head> tag, before your JavaScript loads:

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

What happens if you import Tailwind in App.css

If you put @import 'tailwindcss/tailwind'; inside App.css and then import App.css into App.js, Tailwind will still work — but inefficiently. The CSS will load when App loads, which is usually fast enough that you won't notice. However, you're creating a few problems.

First, you're importing Tailwind inside a component file, which breaks the separation between global styles and component styles. App.css should contain styles specific to the App component, not framework-wide utilities. Second, if your build tool processes CSS modules or scopes CSS to components, it might try to scope Tailwind's classes too, which breaks them. Third, you're making it harder for other developers (or future you) to find where Tailwind is set up.

It works, but it's the wrong place. The right place is the global CSS file that loads first.

Setting up your CSS file structure

A clean structure looks like this: your global CSS file (index.css) sits at the root of your src folder. It imports Tailwind at the top, then any other global styles you need. Your component-level CSS files (App.css, Header.css, etc.) sit next to their components and contain only styles for those specific components.

In index.css:

@tailwind base;@tailwind components;@tailwind utilities;body { margin: 0; font-family: system-ui, sans-serif;}

In App.css (if you need it):

.app-container { padding: 20px;}

In your main.js or index.js (the file that starts your app):

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

This way, index.css loads first, Tailwind is available everywhere, and App.css loads when App loads — the right order.

Frequently Asked Questions

Can I use both a global CSS file and component CSS files?

Yes. Import Tailwind and global styles in your global CSS file, then import component-specific styles in each component. The global file loads first, so Tailwind is available to all components. Component files load when their components load and can override global styles if needed.

What if I'm using CSS-in-JS instead of CSS files?

If you're using styled-components or Emotion, you still need to import Tailwind globally. Put the import at the top of your main app file (index.js or main.js) before anything else renders. Some projects use a global styles file created with styled-components for this purpose.

Does it matter if I name my global CSS file index.css or main.css?

No. The name doesn't matter — only that it's a global file that loads before your app starts. Use whatever name your project uses. Just make sure your HTML file links to it in the <head> tag.

Will importing Tailwind in index.css slow down my page?

No. Tailwind generates its CSS once at build time, not at runtime. Whether you import it in index.css or App.css, the file size is the same. Importing it globally is actually slightly faster because the browser can cache it separately from your component CSS.

What if I forget to import Tailwind and my classes don't work?

Your Tailwind classes (like flex or text-center) will appear in your HTML but won't style anything. Check your global CSS file to make sure the Tailwind import is there and that your HTML file links to it. If the import is missing, add it to the top of your global CSS file.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.