Import Tailwind CSS into your main CSS file, not your JavaScript entry point

Put your Tailwind import in index.css (or whatever your main stylesheet is called), not in app.js or app.tsx. Tailwind needs to process your CSS before the browser loads it, and CSS files are the right place for that job. If you import it in your JavaScript file, you'll either get an error or Tailwind won't work at all.

The confusion happens because both files exist in your project and both load early. But they do different things: index.css handles styling, and app.js handles logic. Putting Tailwind in the wrong place breaks that separation and causes real problems when you try to build your site for production.

Key Takeaways

  • Import Tailwind CSS at the top of index.css with @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; or use the @tailwind directive if you're using PostCSS.
  • Never import Tailwind in app.js or any JavaScript file — CSS imports belong in CSS files only.
  • Your index.js or main.jsx should import index.css, which then pulls in Tailwind automatically.
  • If Tailwind classes aren't showing up, check that your CSS file is actually imported in your JavaScript entry point and that your build tool is configured to process CSS.

The right way: Tailwind in index.css

Open your index.css file (the main stylesheet in your src folder) and add one of these at the very top, before any other CSS:

If you're using PostCSS (the standard setup with Create React App or Vite):

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

If you're using an older setup or installed Tailwind as an npm package without PostCSS:

@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Then make sure your index.js (or main.jsx for Vite) imports that CSS file. It should have a line like import './index.css'; near the top. That's it. Tailwind will load when the CSS loads, and you can use Tailwind classes in your components immediately.

Why app.js is the wrong place

JavaScript files and CSS files are processed differently by your build tool. When you import something in app.js, the bundler treats it as a JavaScript dependency. If you write import 'tailwindcss' in app.js, the bundler tries to load Tailwind as a JavaScript module, not as a stylesheet.

This causes one of two problems. Either you get an error like "Cannot find module" or "Unexpected token" because the bundler doesn't know how to handle CSS in a JavaScript file. Or, if your build tool is set up to handle CSS imports in JavaScript, Tailwind loads but doesn't actually process your CSS — the @tailwind directives don't work, and your classes won't show up in the final output.

The build process expects CSS to come from CSS files. That's where PostCSS (the tool that makes Tailwind work) looks for @tailwind directives. Putting it in JavaScript breaks that chain.

How the import chain actually works

Here's the order of what happens when your site loads:

  1. Your browser loads index.html
  2. index.html loads your JavaScript entry point (index.js or main.jsx)
  3. That JavaScript file imports index.css with import './index.css'
  4. The build tool sees the CSS import and processes it through PostCSS
  5. PostCSS sees @tailwind directives and generates all your Tailwind classes
  6. The final CSS file gets injected into the page
  7. Your components load and use Tailwind classes

If you skip step 3 and try to import Tailwind directly in your JavaScript, steps 4 through 6 don't happen the way they should. The CSS never gets processed properly, and Tailwind doesn't generate the classes you need.

What to do if Tailwind classes aren't working

First, check that index.css is imported in your JavaScript entry point. Open index.js or main.jsx and look for import './index.css'; near the top. If it's not there, add it.

Second, check that your index.css has the @tailwind directives at the very top. They should be the first lines in the file, before any other CSS you've written. If you see them commented out or missing, add them back.

Third, make sure your build tool is configured to handle CSS. If you used Create React App or Vite to set up your project, this is automatic. If you set up Webpack yourself, you need a CSS loader and PostCSS configured in your webpack.config.js. Check your project's documentation or the Tailwind installation guide for your specific setup.

If you still don't see Tailwind classes after checking all three, clear your browser cache and restart your development server. Sometimes the old CSS stays cached and hides the new version.

Common mistakes to avoid

Don't import Tailwind multiple times. You only need it once, at the top of index.css. If you add @tailwind directives to multiple CSS files, you'll generate duplicate classes and bloat your final CSS file.

Don't put @tailwind directives in the middle of your CSS file. They need to be at the top so PostCSS can process them before your other styles. If you mix them in with your custom CSS, the order gets wrong and your styles might not work as expected.

Don't assume that importing the Tailwind npm package in JavaScript will work. The package exists, but importing it in JS doesn't trigger the CSS processing. You have to use the @tailwind directives in a CSS file for Tailwind to actually generate your classes.

Frequently Asked Questions

Can I split my Tailwind import across multiple CSS files?

You can, but you shouldn't. Import all three @tailwind directives (base, components, utilities) in one CSS file, usually index.css. If you split them, you'll generate duplicate classes and make your CSS file larger. Keep it simple and put everything in one place.

What if I'm using Tailwind with a CSS preprocessor like SCSS?

Put the @tailwind directives in your main SCSS file instead of index.css. Your build tool will process the SCSS through Sass first, then through PostCSS for Tailwind. Make sure your JavaScript entry point imports the SCSS file, not the CSS file.

Do I need to import Tailwind in every component file?

No. Import it once in index.css, and every component can use Tailwind classes. The CSS loads globally when your app starts, so all your components have access to it automatically.

Why does my Tailwind CSS file get so large?

Tailwind generates thousands of utility classes by default. In development, you see all of them. When you build for production, your build tool should purge unused classes based on your template files. Check your tailwind.config.js and make sure the content array points to all your component files.

Can I use Tailwind without importing it in CSS?

Not in the standard way. You could install Tailwind as a pre-built CSS file and link it directly in your HTML, but that defeats the purpose of Tailwind — you lose the ability to customize it and you get every class whether you use it or not. The @tailwind import method is the right approach for any real project.