在最初构建react应用程序之后，没有更新顺风CSS类

Question

今天，我决定咬紧牙关，为我的反应应用程序从顺风v2升级到v3。升级进行得很顺利，但我现在遇到了一个问题，在我运行"npm“之后，添加更多的开发中的顺风css类在重新编译应用程序时不会被选中，我理解这是JIIT引擎的工作。

我期望顺风检测更改并添加/删除所需的类。我尝试将基类从“basis 1/2”更改为“basis 3/4”，但是由于在初始构建中没有包含类“bas-2/5”，所以类在热重新加载后出现在div上，但是类没有加载在样式表中。

我知道这是一个特定于顺风的问题，因为我使用chrome工具进行了调查，类名被添加到div中，但是这个值不在重新编写的样式表中：目标css类中。

我认为解决方案可能是在开发过程中包含所有css类，并在生产中清除它们一次，但通过研究，我认为顺风css捆绑包已经变得太大，无法在开发中完全加载。

我也尝试过在tailwind.config.js文件中的内容数组中匹配不同的文件路径，但这也没有帮助。

任何关于这方面的帮助或建议都是很有道理的，并且乐于尝试人们的建议。

感兴趣的档案：

Package.json

{
  "name": "personalreactapp",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000/",
  "dependencies": {
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@headlessui/react": "^1.4.2",
    "@heroicons/react": "^1.0.5",
    "@mui/icons-material": "^5.1.1",
    "@mui/material": "^5.1.0",
    "@mui/styles": "^5.1.0",
    "@tailwindcss/forms": "^0.4.0",
    "@types/js-cookie": "^3.0.1",
    "axios": "^0.21.4",
    "formik": "^2.2.9",
    "highcharts": "^9.1.1",
    "highcharts-react-official": "^3.0.0",
    "history": "^5.2.0",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.0",
    "query-string": "^7.1.1",
    "react": "^17.0.2",
    "react-dom": "^16.0.0",
    "react-hot-toast": "^2.2.0",
    "react-loader-spinner": "^4.0.0",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^6.0.2",
    "react-scripts": "5.0.0",
    "react-toastify": "^8.1.0",
    "reactstrap": "^8.4.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.1.2",
    "rimraf": "^2.6.2",
    "styled-components": "^4.3.2",
    "watch": "^1.0.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "ajv": "^6.9.1",
    "autoprefixer": "^10.4.2",
    "babel-eslint": "^10.1.0",
    "cross-env": "^5.2.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-only-warn": "^1.0.3",
    "eslint-plugin-react": "^7.27.0",
    "nan": "^2.14.1",
    "postcss": "^8.4.6",
    "postcss-cli": "^9.0.2",
    "prettier": "^2.4.1",
    "pretty-quick": "^3.1.1",
    "tailwindcss": "^3.0.23",
    "typescript": "^3.9.10"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/ --max-warnings=0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './src/**/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import store from './redux/store';
import { history } from './_helpers/history';
import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
import './assets/main.css';

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Router history={history}>
    <Provider store={store}>
      <App />
    </Provider>
  </Router>,
  rootElement,
);

registerServiceWorker();

postcss.config

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [tailwindcss('./src/tailwind.config.js'), require('autoprefixer')],
};

资产/尾翼。

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

Answer 1

在创建了一个新的react并同时比较了这些应用程序之后，我发现了这个问题，如果有人有类似的问题，我建议您也这样做。

当我使用顺风V2时，我没有顺风配置。通过对V3的升级，我运行了命令npx tailwindcss init。问题是，我在src文件夹中运行了它，因此在上面的顺风配置中，内容匹配路径将无法工作，因为它正在寻找src文件夹中已经存在的src文件夹。

由于EdLucas在评论中指出了第二个问题，postCSS不再支持信任。即使进行了上述更改，如果存在一个postCSS文件，它也将无法工作。删除该文件将修复此问题。

对于任何想知道tailwindCSS、postCSS和package.json中的自动修复程序的版本的人来说，我在工作解决方案中使用的都是正确的版本。

Answer 2

我也有过类似的问题，并通过调整我的吞咽文件中的观察者来解决它。

在我的吞咽文件中，为我的车把模板配置观察者的行如下所示：

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);

这将在对我的前端代码进行更改时执行HBS任务。但是，它没有执行CSS任务，这意味着我在其中导入的CSS文件没有被正确地重新处理。

我通过将CSS任务添加到HBS观察者的回调中来解决这个问题：

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], series(hbs, css));

Answer 3

我一直试图找出一个类似的问题.几个小时。

最后，我发现，只有当className是javascript表达式，而不是JSX属性常量时，JSX中的顺风类才能自动重新加载。

所以,

<>
    // bad
    <div className="p-5">Won't reload when the className changes</div>

    // good
    <div className={"p-5"}>Will reload when the className changes</div>
</>

我没有在任何文档中看到过这个，但也许我遗漏了一些东西。