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;

Nickens

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!

Nickens

I've noticed that if I use a className in "index.html", the corresponding rule is correctly loaded, like "py-4". Then I can use "py-4" in my "Foobar.tsx". But if I don't add the rule first in "index.html", it's not loaded and not usable in ".tsx". In the context of a Vite + React app. Restarting the server doesn't help. So it seems that something is off with the logic that collects the list of applied styles in the app. – Commercialize

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. 

Milburr

Answer 3

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

Deteriorate

Answer 4

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

Azedarach

Answer 5

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.

Another

Answer 6

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!

Domesday

Answer 7

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.

Predestinarian

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Bottom