Tailwind 使用 vite + React 时不清爽

Question

我用 vite + React + Typescript 启动了一个项目并安装了 tailwind。一切都很顺利，直到我在 /src 中创建了一个子文件夹并在子文件夹内的文件中添加了样式。顺风的自动构建或观察模式停止工作。

例如，当样式位于 /src/App.tsx 中时，一切正常，但如果我在 /src/components/Header.tsx 中添加样式并在 App.tsx 中导入该组件，则 tailwind css 文件不会自动构建。

重新启动服务器确实可以正确应用新样式。

这就是我的文件的样子：

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/布局/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