使用 vite + react 时 Tailwind 不刷新答案

【问题标题】：Tailwind is not refreshing when working with vite + react使用 vite + react 时 Tailwind 不刷新
【发布时间】：2022-12-28 15:35:37
【问题描述】：

我用 vite + react + typescript 开始了一个项目并安装了 tailwind。一切都很顺利，直到我在 /src 中创建了一个子文件夹，并在子文件夹内的文件中添加了样式。 Tailwind 的自动构建或监视模式停止工作。

例如，当样式位于 /src/App.tsx 时一切正常，但如果我在 /src/components/Header.tsx 中添加样式并将该组件导入 App.tsx 中，顺风 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: {},
  },
}

源代码/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;

【问题讨论】：

标签： javascript reactjs tailwind-css postcss vite

【解决方案1】：

事实证明，我最初创建了文件 header.tsx 并立即将其更改为 Header.tsx，然后将其导入 App.tsx 但自动完成导入错误。

import Header from "./layout/header";

有趣的是，服务器启动时组件导入正确，但未能实时更新。

那一行不仅给我带来了 css 问题，还因为导入错误导致了我在文件中所做的任何更改。应该是

import Header from "./layout/Header";

各位晚安！

【讨论】：

我注意到如果我在“index.html”中使用类名，相应的规则就会正确加载，比如“py-4”。然后我可以在我的“Foobar.tsx”中使用“py-4”。但是如果我不先在“index.html”中添加规则，它就不会被加载并且不能在“.tsx”中使用。在 Vite + React 应用程序的上下文中。重新启动服务器没有帮助。因此，在应用程序中收集已应用样式列表的逻辑似乎有些问题。

【解决方案2】：

尝试返回文档，如果您的配置与文档中的配置相同，它应该可以正常工作。

这是 CRA 的文档顺风： https://tailwindcss.com/docs/guides/create-react-app

【讨论】：

【解决方案3】：

对于其他人，请确保在添加此内容的位置导入 .css 文件

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

进入根文件

例如，如果您的 .css 文件是 index.css 并且根文件是 main.jsx/tsx 那么在这个文件中您应该使用

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

【讨论】：