如何通过创建React应用程序启用JIT(即时模式)?

2024-02-13

我尝试自己在 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 devDependency

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

如果我能找到任何方法来解决这个问题,我会很高兴。


如果你使用的是Windows(我怀疑你可能是从你对@Ako的答案的评论中得到的),那么你的设置是正确的,但你只需要安装跨环境 https://www.npmjs.com/package/cross-env,然后像这样调整你的启动脚本:

"start": "cross-env TAILWIND_MODE=watch craco start"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过创建React应用程序启用JIT(即时模式)? 的相关文章

  • Angular 2 测试 ng-content

    我想知道是否有办法测试ng content不创建宿主元素 例如 如果我有警报组件 Component selector app alert template div div
  • 每次用户在地址栏中按 Enter 时,Firefox 插件都会执行某些操作

    我正在尝试编写一个扩展程序 用于监视每次有人在使用地址栏时按下回车键时的情况 步骤将类似于 用户在地址栏中输入一堆文本并按 Enter 键 我的插件启动并接收用户输入的内容 然后我的插件决定如何处理用户输入的字符串 我通过使用在步骤 2 中
  • 在 Javascript 中获取文本框的值

    我有这个html代码 table border cellpadding 3 cellspacing 0 tbody tr td Song td td td tr tbody table
  • HTML5 游戏到本机应用程序 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在用 HTML5 制作游戏 我最熟悉 HTML5 并且比 C 等更高级的语言更喜欢它 HTML5
  • 更改模板标签 <# {% {{ 等后,John Resig 的微模板出现语法错误

    我在使用 John Resig 的 Micro 模板时遇到了一些麻烦 谁能帮我解释为什么它不起作用 这是模板 以及发动机的改装部分 str replace r t n g split join t replace gt t g 1 r re
  • 正则表达式没有按预期工作?

    我有这个正则表达式 new RegExp a z 0 9 ig 我正在测试一个不应该工作的字符串 vc 但它确实通过了测试 而且它不应该 new RegExp a z 0 9 ig test vc true 但如果我删除其中一个 or or
  • Lodash 和 Underscore.js 之间的差异 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 为什么有人会更喜欢Lodash http lodash com or 下划线 js http underscorejs org 实用程序库优于其
  • React i18next languageChanged 事件被多次调用

    我在我的 React js 应用程序中使用 i18next 进行翻译 我在 Header jsx 文件中添加了所有页面通用的语言下拉列表 我正在根据其中一个页面中的当前语言获取数据quiz jsx 因此 在语言更改时应该再次调用 api 问
  • 使用 jQuery animate 时,有没有办法隐藏 webkit 浏览器中显示的工件?

    我正在使用 jQuery animate 在网页上的项目中滑动 由于某种原因 只有在 webkit 浏览器中 元素动画的空间中才会出现伪影痕迹 有没有办法阻止或隐藏这种情况 一旦您加载此处的页面 它们就会出现在轮播上 http www my
  • 根据复选框显示/隐藏输入字段[重复]

    这个问题在这里已经有答案了 如果单击该复选框 它将显示一个输入字段 到目前为止它正在工作 但如果未选中该复选框 它应该隐藏它 我该怎么做 div class checkbox div
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 如何从 WinRT StreamSocket 读取所有可用数据并清空 inputStream?

    我想在向套接字写入新数据之前读取当前正在等待套接字的所有数据 WinRT中的读取方法都是异步的 所以我不能简单地while直到套接字为空 由于我确实想丢弃套接字上的数据 因此我不想使用读取器 而是直接从套接字读取数据IInputStream
  • 使用 React Hook Form 和 Yup 进行文件输入验证

    我尝试使用 React Hook Form 进行文件输入验证 是的 我写了下面的代码 但是当我测试文件的大小时 它在这里显示console log value 0 size 即使我在文件输入中选择了一个文件 该值也是未定义的 这有什么问题吗
  • 如何使用 javascript 禁用组合键?

    I would like to disable view source shortcut key for IE using JavaScript To disable Ctrl C I am using the following func
  • 出于安全目的,您是否有理由不执行自己的算法来打乱 ID?

    我计划实现我自己的非常简单的 哈希 公式 为具有多个用户的应用程序添加一层安全性 我目前的计划如下 用户创建一个帐户 此时后端会生成一个 ID ID 通过公式运行 假设 ID 57 8926 36 7 或同样随机的东西 然后 我将新的用户
  • 如何在画布中旋转图表同时保持数字垂直?

    我正在尝试围绕其中心旋转画布中的图表 同时保持字母直立 我正在尝试使用 ctx rotate 但它使用画布的左侧作为中心来旋转整个图表 以下链接提供了视觉效果 我希望它看起来像绿色 而不是红色 就像我的代码当前所做的那样 视觉解释 http
  • 仅使用 javascript 获取网站的正文元素

    我想检索以下网站的正文内容http sports espn go com nhl bottomline scores nhl s left1 http sports espn go com nhl bottomline scores nhl
  • Javascript 最佳实践,为什么使用逗号来链接函数/变量声明?

    我一直在为 jQuery jQueryLog 开发一个插件 以允许调试链选择器和返回值 如果你想检查一下 你可以这样做here http www jquerylog com 这已经是第二个版本了 第一个版本实际上是经过编辑的 jQuery
  • 从外部material-ui组件访问主题

    我有一个使用标准深色主题的主题提供商 我希望能够从我自己的自定义组件访问该主题的详细信息 但我不知道如何做到这一点 在下面的例子中 this props theme未定义 ReactDOM render
  • 在哪里放置资源特定逻辑

    您能帮我考虑在 AngularJS 中将资源 服务 特定的业务逻辑放置在哪里吗 我觉得在我的资源上创建一些类似模型的抽象应该很棒 但我不确定如何做 API调用 gt GET customers 1 lt first name John la

随机推荐

  • DependencyProperty 未在 NotifyCollectionChanged 事件上通知 UI

    我正在使用一个自定义控件 该控件具有选定的项目依赖属性 我已将其连接到集合更改事件 但未通知 UI 并且 PropertyChanged 事件始终为空 通常我会说这是一个数据上下文问题 但我无法更改控件上的数据上下文 因为不会显示任何数据
  • 如何使用Matlab的bsxfun求解累加和

    我有以下 慢 代码 A is n by m matrix B is n by m by d matrix C is n by m by d matrix R is 1 by d vector A zeros n m for i 1 d A
  • 将 XML 实体保留在输出中 (jSoup)

    我正在使用 jsoup 进行一些 xml 处理 问题是 它正在替换 xml 实体 即 187 与 html 实体 raquo 我如何保留原始 xml 实体 常规脚本 import org jsoup Jsoup import org jso
  • Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

    我正在尝试使用 Vue js 和 Nuxt 在表中循环 tr 但是当我加载页面时出现以下错误 vue runtime esm js 2b0e 619 Vue warn 客户端渲染 虚拟 DOM 树与服务器渲染的内容不匹配 这是 可能是由不正
  • Eclipse 停止编译 RenderScript 文件

    我的 Android 项目中有一个 RenderScript rs 文件 SomeScript rs 在我开发它的过程中 它运行得很好 但后来我在 Eclipse 中清理了工作区 现在它似乎没有将该文件识别为 RenderScript 文件
  • Symfony:错误:尝试调用函数“ctype_digit”

    我尝试在服务器上安装 Symfony 3 3 项目时遇到错误 我正在使用 Apache HTTP 服务器和 PHP 7 0 当我访问 app dev php 时 它显示该错误 UndefinedFunctionException Attem
  • 如何删除旧的不需要的设备?

    所以这与我之前发布的问题有关 如何删除4 3模拟器 https stackoverflow com q 10834817 96716 我愚蠢地安装了 iOS 5 0 模拟器 现在我上一篇文章中提供的技术不起作用了 当您删除 5 0sdk 然
  • 自定义语言的 Gradle 插件

    我有一种自定义语言 假设它是 MyLang 但它可以是任何语言 我想为其制作一个插件 该插件需要 能够识别 DSL 给定语言的源集 能够使用可执行文件 编译器 来编译它们 我能够创建一个带有编译任务 还为空 的插件 并使用 Language
  • 将 XWPFRun 拆分为多个运行

    我正在尝试修改existingWord 文档自动将其中的某些关键字加粗 举个例子 敏捷的棕色狐狸跳过了懒狗 1 会成为 快速棕色fox跳过懒惰者dog 2 我的问题是 1 是一次运行 2 变成 5 次运行 5 作为狗后面的句点不是粗体 但它
  • netty中非阻塞通道中的SO_TIMEOUT

    如果通道在超时毫秒内未收到读取 响应 SO TIMEOUT 是否会使非阻塞通道过期 bootstrap group workerGroup channel NioSocketChannel class handler channelInit
  • JBoss 5.0.1 上的 servlet jar 文件在哪里?

    大家好 我正在尝试设置要在 JBossAS 5 0 1 上运行的构建文件 并且我需要找到应该用于构建的 servlet jar 文件 我看过的所有网页似乎都表明该文件是 javax servlet jar 并且它应该位于 C server
  • 尝试播放音频 (.wav) 文件时没有声音

    我有一个非常简单的类 可以使用以下代码播放声音文件 import java io File import java io IOException import javax sound sampled AudioSystem import j
  • Vuetify 数据表不显示数据

    Vuetify 数据表不显示数据 显示显示了 1 行中的 1 行 但表体为空 我的组件代码
  • 从子表单更改父表单属性的正确方法是什么?

    我只是想知道我是否以正确的方式这样做 我有两个表单 一个父表单和一个子表单 选项对话框 要从子表单更改父表单中的属性 我使用如下代码 Create an array of all rich textboxes on the parent f
  • 部署时捆绑器错误

    我目前正在使用guard 即guard coffeescript gem 在我的OSX 开发系统上编译我的javascript 将来我可能会添加更多的guard 任务 我添加了rb fseventgem 到我的 Gemspec 现在我看到在
  • 我应该在临时/生产环境中使用 PHPUnit 吗?

    我已经安装了 PHPUnit 框架来执行单元测试 我已经编写了测试用例 并且还使用了现有的 PHPUnit 库进行测试 是否需要在临时和生产环境中配置 PHPUnit 框架 如果是这样 phpunit 测试框架和相关文件会在暂存和生产中占用
  • Angular2 ng-bootstrap:使用不同的数据重用模态模板

    我正在构建一个类似仪表板的界面 其中包含一组包含可比数据的实体 这些实体中的每一个都有一个编辑按钮 我想用它来打开一个显示相应数据的模式 我想重用相同的模式模板 并显示来自单击编辑按钮的实体的数据 我在用Angular2 with ng 引
  • 检查 Java 中的内存布局

    我正在尝试继承 出于教育目的 我想检查为各种对象分配的地址以及对象内的字段 有没有一个工具可以让我查看 JVM 正在使用哪些内存以及它的用途 例如 如果我有两个课程 class A int i j int f class B extends
  • 在 cap 部署时预编译资产时收到“警告:已初始化常量”

    目前 我在通过 capistrano 进行生产部署时遇到了关于部署 资产 预编译的奇怪警告消息 当我第一次部署演示 Rails 项目时运行 cap 生产部署时 收到以下警告消息 并且部署失败 cap 中止
  • 如何通过创建React应用程序启用JIT(即时模式)?

    我尝试自己在 create react app 中设置 JIT 但它似乎不起作用 因为样式没有更新 我正在使用 craco 来构建带有 tailwind css 的应用程序 并且还添加了 TAILWIND mode WATCH 因为他们建议