Tailwind is not refreshing when working with vite + react

Question

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;

Answer 1

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!

Answer 2

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.