Ruby Rails，TailwindCSS 和 React 编译时间非常慢

Question

我正在为一个即将进行的项目尝试 RoR，但我尝试使用的工具遇到了一个有趣的障碍。该项目是使用 rails new app --database postgresql --webpack react 设置的，非常适合快速将 React 嵌入到应用程序中。

我发现问题是当我尝试将 TailwindCSS 添加到组合中时，它可以工作，但速度非常慢。 React 代码中的 1 行更改会触发完整的 webpack 重新编译，每次刷新需要超过 40-50 秒，这是不可行的。

我环顾四周，甚至尝试实施 TailwindCSS JIT，这本身就令人头疼，但也没有解决我的问题。我也找不到关于我的确切配置（反应和顺风）的任何真正具体的内容以及如何解决这个特定问题。

这是我的配置：

// app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stylesheets/application" // I have tried with and without this...

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// app/javascript/stylesheets/application.css

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";

// app/views/layouts/application.html.erb
...
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'index' %>
  </head>
...

有没有什么地方可以放置 application.css 导入，这样每次我在 React 中进行更改时它都不会编译？

提前致谢。

Answer 1

我在我的项目中使用这个 gem https://github.com/rails/tailwindcss-rails

包含 tailwind.css https://github.com/rails/tailwindcss-rails/blob/main/app/assets/stylesheets/tailwind.css 并将清除生产环境中未使用的 css

Ruby Rails，TailwindCSS 和 React 编译时间非常慢

Ruby on Rails, TailwindCSS and React very slow compile times

ruby-on-rails

reactjs

tailwind-css