如何将带有 PostCSS 清除的 Tailwind CSS 添加到 Rails 5？

Posted 2023-03-07

【中文标题】如何将带有 PostCSS 清除的 Tailwind CSS 添加到 Rails 5？

【英文标题】：how to add Tailwind CSS with PostCSS purge to rails 5?

【发布时间】：2021-07-22 07:17:17

【问题描述】：

我想将 tailwindcss 添加到新的 rails 5.2.5 项目中。因为我喜欢顺风但知道重量很重，我也想有一个清除 css 模块。

我遵循了几个设置指南以及官方文档的说明。我也尝试通过 gems 安装 tailwind（https://github.com/rails/tailwindcss-rails，https://github.com/IcaliaLabs/tailwindcss-rails），但由于所有的解决方案都基于 rails 6，所以没有任何效果。我也不知道 webpack 实际上做了什么，所以我宁愿不使用它，而是通过资产管道使用 tailwind，但也可以使用类清除。

我在构建过程中有点迷失。是否有关于如何在 rails 5 而不是 rails 6 设置顺风的便捷指南？我真的很喜欢大多数宝石的自动方法，但找不到方便的解决方案。

谢谢！

【参考方案1】：

可以在不使用 Webpacker 和 tailwindcss-rails 的情况下将 tailwind 添加到资产管道。

如果您使用新的 Tailwind CLI，您可以构建 tailwind 类，将它们连接到资产管道并即时清除未使用的类。

使用 Tailwind CLI 的一般说明位于安装部分，当前为 in their docs，您需要安装 node 才能访问 npx 命令。

一旦您了解了一般方法，请使用以下步骤：

更新生成的 tailwind.config.js 以打开即时编译并在 rails 中配置类清除

module.exports = 
  mode: 'jit',
  purge: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/javascripts/**/*.js'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: ,
  plugins: [],

确保添加所有声明 Tailwind 类的路径，否则 purge 可能会删除您正在使用的类 (read Writing purgeable HTML tailwind docs for more details)

在开发过程中运行观察者进程，以便根据您编写的 HTML 持续构建您的 CSS

npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css -w

请注意，我将生成的顺风样式放入供应商/资产中，但您可以将它们放置在资产管道查找 css 的任何位置。

另外，我仍然使用autoprefixer-rails gem，这样我就可以在tailwind 和我的项目css 中应用正确的前缀。在这种情况下，您需要在 tailwind watch 命令中设置--no-autoprefixer，这样您就不会运行两次。

然后使用@import 'tailwind' 将顺风样式导入您的app/assets/stylesheets/application.scss

如果文件位于您的资产路径中，样式将被导入。

确保您有重新编译tailwind.css 文件的部署选项，因为JIT 编译可能无法保证（Tailwind 建议这样做）。这取决于您的部署方式，但我在部署期间运行以下命令：

NODE_ENV=production npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css

应该是这样的。

我在 Rails 6.1 上运行这种方法，但它没有使用任何特殊的东西，我希望它应该在 Rails 5 项目中运行。

最后，您可能有兴趣使用 Tailwind @apply 功能来设置 Tailwind 类的一些默认样式。使用此设置也可以做到这一点。为此，您需要为在 Tailwind 编译期间使用的基类提供一个额外的文件。这里重要的是不要将此文件添加到您的 application.scss 中，因为资产管道不会理解 @apply。

我将我所做的几个样式添加到app/assets/stylesheets/tailwind/base.css 文件中。

然后我将编译观察器修改为npx tailwindcss --no-autoprefixer -i ./app/assets/stylesheets/tailwind/base.css -o ./vendor/assets/stylesheets/tailwind.css -w，它将收集所有基本样式集并将它们编译到顺风输出文件中。

祝你好运。

【讨论】：

我是否也可以将 Tailwind 3 添加为一个简单的 CSS 库，而不执行整个编译步骤？