I installed Tailwind as a Vite plugin, and it works fine when used directly in app.css. However, when I apply Tailwind classes inside a separate component file and import it into app.jsx, the styles don’t appear. How can I fix this?

I installed Tailwind as a Vite plugin, and it works fine when used directly in app.css. However, when I apply Tailwind classes inside a separate component file and import it into app.jsx, the styles don’t appear. How can I fix this?

• tailwind-css
• vite
• tailwind-ui

• Could you share an example code? What do you have in app.css, and what are you using in app.jsx? How did you install TailwindCSS? – rozsazoltan Commented Mar 31 at 9:03
• Without an example, I assume you want to use @apply inside a <style> block: in the answer – rozsazoltan Commented Mar 31 at 9:10
• I recently wrote an installation guide for setting up TailwindCSS alongside create-react-app, create-next-app, and Vite+React projects. Maybe this useful for you: How to install React and TailwindCSS v4 using PostCSS – rozsazoltan Commented Mar 31 at 9:11
• As of January 2025, TailwindCSS v4 has been released. Since you didn't mention a version, it's possible that out of habit, you're following the v3 installation steps with npm install tailwindcss, but these are now outdated. To properly install v3 or review the breaking changes in v4, check my answer. Too much if related to this question, please share more information. – rozsazoltan Commented Mar 31 at 9:16

2 Answers 2

If you want to use @apply in a separate component, you first need to reference the global app.css using the @reference directive like this:

./src/css/app.css

@import "tailwindcss";

@theme {
  
}

• Using @apply with Vue, Svelte, or CSS modules - TailwindCSS v4 Docs

After that, TailwindCSS v4's CSS-first configuration provides a @reference directive, which allows us to integrate TailwindCSS functionality into the scoped styles of each extra Vue, Svelte, and other components.

If you want to use @apply or @variant in the <style> block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.

To do this without duplicating any CSS in your output, use the @reference directive to import your main stylesheet for reference without actually including the styles:

./src/components/component.jsx

<style>
@reference "./../css/app.css";
    
h1 {
  @apply text-2xl font-bold text-red-500;
}
</style>

If you're just using the default theme with no customizations, you can import tailwindcss directly without app.css' customizations:

./src/components/component.jsx

<style>
@reference "tailwindcss";
    
h1 {
  @apply text-2xl font-bold text-red-500;
}
</style>

• @reference directive - TailwindCSS v4 Docs

TailwindCSS v4

Starting from January 2025, with the release of TailwindCSS v4, running npm install tailwindcss will install the new v4 instead of v3. This is important because v4 comes with several breaking changes.

• What's breaking changes from TailwindCSS v4? - StackOverflow

Removed @tailwind directives

In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3:

Not supported from v4

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

Supported from v4

@import "tailwindcss";

• Upgrade guide - TalwindCSS v3 to v4
• Problem with "npx tailwindcss init -p" command - StackOverflow - related to v4 upgrade
• Unable to upgrade Tailwind CSS v3 to v4 - StackOverflow - related to v4 upgrade
• How to setting Tailwind CSS v4 global class? - StackOverflow - related to v4 upgrade
• Change TailwindCSS default theme with Vite - StackOverflow - related to v4 upgrade

TailwindCSS v3

If you still want to use v3, install it with a specific version:

npm install tailwindcss@3