使用 vite + react 時 Tailwind 不刷新

Question

我用vite + react + typescript 啟動了一個項目並安裝了tailwind。 一切都很順利，直到我在 /src 中創建了一個子文件夾，並在子文件夾內的文件中添加了 styles。 Tailwind 的自動構建或監視模式停止工作。

例如，當 styles 在 /src/App.tsx 中時，一切正常，但如果我在 /src/components/Header.tsx 中添加 styles 並將該組件導入 App.tsx，則尾風 css 文件不會自動構建。

重新啟動服務器確實會正確應用新的 styles。

這是我的文件的樣子：

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: {},
  },
}

源代碼/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/布局/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

事實證明，我最初創建文件 header.tsx 並立即將其更改為 Header.tsx，然后將其導入 App.tsx 但自動完成導入錯誤。

import Header from "./layout/header";

有趣的是，服務器啟動時組件導入正確，但未能實時更新。

那一行不僅給我帶來了 css 的問題，還因為導入錯誤導致我在文件中所做的任何更改。 應該是

import Header from "./layout/Header";

各位晚安！

Answer 2

嘗試返回文檔，如果您的配置與文檔中的配置相同，它應該可以正常工作。

這是 CRA 的順風文檔： https://tailwindcss.com/docs/guides/create-react-app

Answer 3

對於其他人，請確保在添加此內容的位置導入 .css 文件

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

進入根文件

例如，如果您的 .css 文件是index.css並且根文件是main.jsx/tsx那么在這個文件中您應該使用

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