Tailwind CSS 類在初始構建 React 應用程序后未更新

Question

我今天決定咬緊牙關，將我的 React 應用程序從 tailwind v2 升級到 v3。 升級很順利，但我現在遇到一個問題，在我運行“npm start”后，在重新編譯應用程序時，在開發中添加額外的 tailwind css 類不會被拾取，我知道這是 JIIT 引擎的工作。

我希望 tailwind 能夠檢測到變化並添加/刪除所需的類。 我嘗試將基礎 class 從“basis-1/2”更改為“basis-3/4”，但由於我沒有在初始構建中包含 class“basis-2/5”，類名出現在 div 之后熱重載，但樣式表中未加載 class。

我知道這是順風特有的問題，因為我使用 chrome 工具進行了調查，並且類名已添加到 div，但該值不在重新編譯的樣式表中：目標 css class

我認為解決方案可能是在開發中包括所有 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')],
};

索引.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')],
};

資產/tailwind.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

Answer 1

在創建一個新的 React 應用程序並並排比較應用程序后，我發現了問題，如果有人遇到類似的問題，我建議您也這樣做。

當我使用順風 V2 時，我沒有順風配置。 隨着升級到 V3，我運行了命令npx tailwindcss init 。 問題是我在 src 文件夾中運行它，所以在上面的順風配置中，內容匹配路徑將不起作用，因為它正在尋找 src 文件夾中已經存在的 src 文件夾。

感謝 EdLucas 在評論中指出的第二個問題是不再支持 postCSS 配置。 即使進行了上述更改，如果存在 postCSS 文件，它也將無法工作。 刪除該文件將解決該問題。

對於想知道上面 package.json 中的 tailwindCSS、postCSS 和 autoprefixer 版本的人來說，這是我在工作解決方案中使用的正確版本。

Answer 2

我有一個類似的問題，並通過調整我的 gulpfile 中的觀察者來解決它。

在我的 gulpfile 中，為我的 Handlebars 模板配置觀察程序的行如下所示：

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

當我的前端代碼發生更改時，這將執行 HBS 任務。 但是，它沒有執行 CSS 任務，這意味着我在其中導入 Tailwind 的 CSS 文件未正確重新處理。

我通過將 CSS 任務添加到 HBS 觀察者的回調中來解決它：

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

Answer 3

我一直試圖找出一個類似的問題......小時。

最后，我發現 JSX 中順風類的自動重新加載僅在className是 javascript 表達式而不是 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>
</>

我沒有在任何文檔中看到這一點，但也許我錯過了一些東西。

Answer 4

當 React 組件具有一些動態內容和/或類名時，我發現會出現問題。 基本上，構建腳本和啟動腳本（隨 create-react-app 一起提供）都不會在最終生成的 CSS 文件中包含這些順風類。 （因為基本思想是最小化 CSS 文件的大小，並且不包括不必要的 tailwind CSS 類，即未明確提及的類。）

所以我的解決方案是創建一個Helper.js組件，當我在其他組件中動態生成它們時，它會明確提及我需要的所有順風類。

我沒有在應用程序中使用Helper.js組件，也沒有從中導入任何內容，但這個文件只是位於src目錄中，因此其中提到的 tailwind 類包含在 css 中。

Tailwind state 在https://tailwindcss.com/docs/guides/create-react-app的官方 v3.2.4（寫作時）文檔中：

Create React App 不支持自定義 PostCSS 配置，並且與 PostCSS 生態系統中的許多重要工具不兼容，例如postcss-import 。

我們強烈建議使用 Vite、Parcel、Next.js 或 Remix，而不是 Create React App。 它們提供同等或更好的開發人員體驗，但具有更大的靈活性，讓您可以更好地控制 Tailwind 和 PostCSS 的配置方式。

我花了一段時間才弄明白。 希望這可以幫助。