Tailwind is not refreshing when working with vite react-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

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!