tailwind css 类没有显示,我按照 tailwindcss.com create-react-app 的安装过程来安装它。交叉检查,我似乎找不到它仍然不起作用的原因。我确实按照与此问题相关的答案中的说明将 react 脚本更新到版本 5.0.1,但它没有解决问题。
这是 package.json 文件
{
"name": "my-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24"
}
}
Tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
索引.css
@tailwind base;
@tailwind components;
@tailwind utilities;
function App() {
return <div className="container mx_auto bg-gray-200 rounded-xl">
<p className="text-5xl font-bold">
Welcome
</p>
<p className="text-grey-500 text-lg">
React and Tailwind css updated now
</p>
</div>;
}
export default App;
最佳答案
也许这会对某人有所帮助。所以我遇到了这个问题,一切都从顺风的官方文档正确安装。但风格并未得到体现。
当我说整个安装顺利时,我的意思是一切,比如配置中的内容,tailwindcss、postcss、autoprefixer
并包括基本的 tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
然后index.css
中的样式。
我这边的问题是我只需要使用此命令更新 react 脚本:
npm install react-scripts@latest
我以前的版本是2.x
,安装后5.x
已安装,现在一切正常。
PS:顺风指令可以以任何一种方式添加,两种方式都适合我 选项 1(我选择了这个)
@tailwind base;
@tailwind components;
@tailwind utilities;
或 选项2
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
关于reactjs - Tailwind 类在安装后无法与 React 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72184495/