I started a project with vite + react + typescript and installed tailwind. Everything was working smoothly until I created a subfolder in /src and added the styles in files inside the subfolder. The auto build or watch mode for tailwind stopped working.

For example when the styles were in /src/App.tsx everything works fine, but if I add styles in /src/components/Header.tsx and import that component in App.tsx the tailwind css file is not getting built automatically.

Restarting the server does apply the new styles properly.

This is what my files look like:

tailwind.config.js

module.exports = {
    content: ["./index.html", "./src/**/*.{html,ts,tsx}", "./src/*.{ts,tsx}"],
    theme: {
        borderColor: {
            black: "#000",
        },
        borderWidth: {
            1: 1,
        },
        extend: {
            colors: {
                custom1: "#F5A",
            },
        },
    },
    plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/App.tsx

import "./index.css";
import Users from "./components/Users";
import Header from "./layout/header";

function App() {
    return (
        <div>
            <Header />
            <Users />
        </div>
    );
}

export default App;

src/layout/Header.tsx

import React from "react";

function Header() {
    return (
        <div className="bg-custom1">
            <h1 className="text-5xl p-6">Welcome to my app!</h1>
            <nav>
                <ul>
                    <li>
                        <a href="/addUser">Add User</a>
                    </li>
                    <li>
                        <a href="/addUser">Users</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

export default Header;

I started a project with vite + react + typescript and installed tailwind. Everything was working smoothly until I created a subfolder in /src and added the styles in files inside the subfolder. The auto build or watch mode for tailwind stopped working.

For example when the styles were in /src/App.tsx everything works fine, but if I add styles in /src/components/Header.tsx and import that component in App.tsx the tailwind css file is not getting built automatically.

Restarting the server does apply the new styles properly.

This is what my files look like:

tailwind.config.js

module.exports = {
    content: ["./index.html", "./src/**/*.{html,ts,tsx}", "./src/*.{ts,tsx}"],
    theme: {
        borderColor: {
            black: "#000",
        },
        borderWidth: {
            1: 1,
        },
        extend: {
            colors: {
                custom1: "#F5A",
            },
        },
    },
    plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/App.tsx

import "./index.css";
import Users from "./components/Users";
import Header from "./layout/header";

function App() {
    return (
        <div>
            <Header />
            <Users />
        </div>
    );
}

export default App;

src/layout/Header.tsx

import React from "react";

function Header() {
    return (
        <div className="bg-custom1">
            <h1 className="text-5xl p-6">Welcome to my app!</h1>
            <nav>
                <ul>
                    <li>
                        <a href="/addUser">Add User</a>
                    </li>
                    <li>
                        <a href="/addUser">Users</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

export default Header;

• javascript
• reactjs
• tailwind-css
• postcss
• vite

7 Answers 7

Turns out, I originally created the file header.tsx and immediately changed it to Header.tsx, then imported it in App.tsx but it was imported incorrectly by the autocomplete.

import Header from "./layout/header";

The interesting thing is that the component was imported properly when server was started but failing to update in real time.

That was the line that was causing me problems not only with css but also with any change I made in the file since the import was wrong. It should've been

import Header from "./layout/Header";

Good night everyone!

For others, make sure you import the .css file where you added this

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

into the root file

For example, if your .css file is index.css and the root file is main.jsx/tsx then inside this file you should use

import "./index.css" // make sure the path. 

Try going back to the documentation, it should work correctly if your configuration is the same as in the documentation.

This is documentation tailwind with CRA: https://tailwindcss.com/docs/guides/create-react-app

for me i almost followed the instructions correctly

correct step after installing tailwind and it's dependencies -> npx tailwindcss init -p

I forgot the '-p' so the postcss.config.js file was never generated! doh

now my vite react project jsx files are showing the tailwind changes

I was facing the same issue but in my case, the problem was due to incorrect template path in Tailwind Configuration.

So, make sure your content configuration is correct in tailwind.config.js

1. In your tailwind.config.js: Make sure the content source is pointing to your files that are using tailwind. refer

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Restart the build process

npm run dev

** Ensure there are no warning messages regarding invalid file paths.

I changed my vite.config.js file. (Before changes)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Replaced by this:(After changes)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
  },

  build: {
    rollupOptions: {
      
    }
  }
})

It worked for me. Upvote if it works for you!

You should simply reinstall tailwind and check if that works. i spent a long time matching my code with the working one, but it resolved on reinstalling only.