reactjs 安装后，Tailwind类无法与react配合使用

okxuctiv 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(189)

顺风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: [],
}

index.css
一个二个一个一个

reactjs

来源：https://stackoverflow.com/questions/72184495/tailwind-classes-not-working-with-react-after-installation

3条答案

按热度按时间

aiazj4mn1#

1.从devDependencies中卸载tailwind ... npm uninstall <name of the modules> --save-dev。
1.将Tailwind安装在依赖项上，* 而不是devDependencies* 上（不带-D）

npm install tailwindcss postcss autoprefixer

1.遵循官方文件中的其余部分。
我已经练习了7个月了就像这样

赞(0）回复(0）举报 2022-12-29

xu3bshqb2#

也许这会帮助一些人。所以我有这个问题，一切都安装正确，从官方文件从顺风。但风格没有得到反映。
当我说整个安装进行得很好，我真的是指一切，像内容内的配置，tailwindcss, postcss, autoprefixer和包括基地顺风

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

样式，然后index.css。
我这边的问题是我必须使用以下命令更新react脚本：

- 一米二米一x**

我以前的版本是2.x，安装后安装了5.x，现在一切正常。
附言：和顺风指令可以添加任何一种方式，都为我的作品选项1（我已经去了这一个）

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

或选项2

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

赞(0）回复(0）举报 2022-12-29

iqih9akk3#

你可以试试这个：

npm install postcss-flexbugs-fixes postcss-normalize postcss-preset-env

我有同样的问题，这条线帮助了我。

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 安装后，Tailwind类无法与react配合使用

3条答案

相关问题

热门标签

最新问答