javascript - 如何通过创建 react 应用启用 JIT(即时模式)?

标签 javascript reactjs tailwind-css craco

我尝试自己在 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"
},
如果我能找到任何方法来解决这个问题,我会很高兴。

最佳答案

如果您在 Windows 上(我怀疑您可能来自您对 @Ako 答案的评论),那么您的设置是正确的,但您只需要安装 cross-env ,然后像这样调整您的启动脚本:

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

关于javascript - 如何通过创建 react 应用启用 JIT(即时模式)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68619975/

相关文章:

javascript - ES2015 的 React 数组映射问题

javascript - React子组件props : _this2. props.delete它不是一个函数

Javascript计算公式

javascript - 如何在立即单击按钮时不显示工具提示?

php - 匹配电子邮件的正则表达式

javascript - 移动 chrome 和模式的奇怪行为

html - 顺风 : equal height columns

css - 使用 Angular 8 + Tailwind.css + LESS 进行缓慢的 Webpack 编译

Javascript如何在点击同一页面中的链接时重新加载页面?

javascript - 使用 Capybara 检测 javascript 事件处理程序