我开始使用vite + react + typescript来做一个项目,并安装了tailwind。一切都很顺利,直到我在/src中创建了一个子文件夹,并将样式添加到子文件夹中的文件中,tailwind的自动构建或监视模式就停止工作了。
例如,如果样式在/src/App.tsx中,一切正常,但是如果我在/src/components/Header.tsx中添加样式并在App.tsx中导入该组件,则tailwind css文件不会自动构建。
重新启动服务器可以正确地应用新样式。
下面是我的文件内容:
tailwind.config.js
例如,如果样式在/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;