如何使用 create react app 启用 JIT（即时模式）？

Question

我尝试自己在 create-react-app 中设置 JIT，但它似乎不起作用，因为样式没有得到更新。我正在使用 craco 构建带有 tailwind css 的应用程序，并且还按照他们的建议添加了 TAILWIND mode=WATCH 以使其适用于大多数构建。这是我的配置：

tailwind.config.js

module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
    extend: {
        colors: {
            primary: "#ffa500",
            secondary: {
                100: "#E2E2D5",
                200: "#888883",
            },
        },
    },
},
variants: {
    extend: {
        opacity: ["disabled"],
    },
},
plugins: [],};

package.json 脚本

    "scripts": {
    "start": " craco start",
    "build": "TAILWIND_MODE=watch craco build",
    "test": "craco test",
    "server": "nodemon ./server/server.js",
    "eject": "react-scripts eject"
},

package.json devDependencies

"devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
},

如果我能找到解决这个问题的方法，我会很高兴。

Answer 1

因此，您必须使用 tailwindcss CLI 中提供的 ```--watch``` 选项来查看您的 JSX、JS、HTML 文件，
所以你可以做的是在 react 项目的根目录中打开一个新的终端，然后按照下面的命令

npx tailwindcss -o ./src/App.css --watch

[-i] 您也可以使用此选项提供输入文件。
[-o] 根据您的文件夹结构修改输出。

这将确保重建 CSS 文件，下一步是打开另一个终端并执行 npm start，您的开发服务器已准备好使用 JIT 编译器。

（旁注）
此外，我在 package.json 的默认配置中使用 tailwind，它在没有 craco（JIT/默认）和生产中也能顺利运行。

Answer 2

你必须在你的 start 脚本而不是 build 中使用 TAILWIND_MODE=watch，并且在你开发了你想要的东西之后构建它仅使用 craco build 脚本。所以您的 package.json 脚本必须如下所示：

  "scripts": {
    "start": "TAILWIND_MODE=watch craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
  },

同样在 tailwind.config.css 文件中的 purge prop 中，您必须添加 './src/components/*.{js,jsx}' 因此 purge 应该如下所示：

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],

并且在构建应用程序后，您必须在构建文件夹中提供 index.html 文件。

克隆这个 repo 并在构建项目后使用 npm run servebuild 看看它是否有效。 https://github.com/ako-v/cra-tailwindcss-jit-craco

Answer 3

如果你在 Windows（我怀疑你可能来自你对@Ako 的回答的评论），那么你的设置是正确的，但你只需要安装 cross-env，然后调整你的像这样启动脚本：

"start": "cross-env TAILWIND_MODE=watch craco start"

如何使用 create react app 启用 JIT（即时模式）？

How to enable JIT(Just in time mode) with create react app?

javascript

reactjs

tailwind-css

craco