Tailwind与vite + react一起使用时无法刷新

Question

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

例如，如果样式在/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/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;

- David Choi

Answer 1

原来，我最初创建了文件header.tsx，然后立即将其更改为Header.tsx，并在App.tsx中导入，但它被自动完成不正确地导入。

import Header from "./layout/header";

有趣的是，组件在服务器启动时已经被正确导入，但实时更新时失败了。

这一行不仅导致CSS出现问题，也导致我对文件进行任何更改时都会出现问题，因为导入是错误的。它本应该是：

import Header from "./layout/Header";

大家晚上好！

- David Choi

---

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

Answer 2

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

这是使用 CRA 的 Tailwind 文档： https://tailwindcss.com/docs/guides/create-react-app

- Muhammad Gata

Answer 3

对于其他人，请确保导入您添加此文件的 .css 文件

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

进入根目录

例如，如果你的 .css 文件名为 index.css ，根文件名为 main.jsx/tsx，那么在这个文件中你应该使用以下代码：

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

- Ali Murtaza

Answer 4

我遇到了相同的问题，但在我的情况下，问题是由于Tailwind 配置中模板路径不正确导致的。

因此，请确保你的内容配置在 tailwind.config.js 文件中是正确的。

1. 在你的 tailwind.config.js 文件中：确保 content 源指向正在使用 tailwind 的文件。参考链接

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

重新启动构建过程

npm run dev

**确保没有关于无效文件路径的警告消息。

- Yogesh Yadav

Answer 5

我修改了我的vite.config.js文件。（在更改之前）

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

被替换为这个：（更改后）

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

对我有效。 如果对你有效，请点赞！

- Aman Gupta