我用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: {},
},
}
源代码/应用程序. tsx
import "./index.css";
import Users from "./components/Users";
import Header from "./layout/header";
function App() {
return (
<div>
<Header />
<Users />
</div>
);
}
export default App;
源代码/布局/标题. 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;
3条答案
按热度按时间rseugnpd1#
原来,我最初创建了文件header.tsx,并立即将其更改为Header.tsx,然后将其导入App.tsx,但自动完成时导入错误。
有趣的是,当服务器启动时,组件被正确导入,但无法真实的更新。
就是这一行给我带来了问题,不仅是css,还有导入错误后我对文件所做的任何更改。
各位晚安!
iqih9akk2#
尝试返回文档,如果您的配置与文档中的配置相同,则它应该可以正常工作。
这是CRA的顺风文件:https://tailwindcss.com/docs/guides/create-react-app
bis0qfac3#
对于其他应用程序,请确保在添加此文件的位置导入.css文件
到根文件
例如,如果.css文件是
index.css
,根文件是main.jsx/tsx
,则在此文件中应使用