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

Question

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

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

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

谢谢你！

Answer 1

可以在不使用 Webpacker 和 tailwindcss-rails 的情况下将 tailwind 添加到 Asset Pipeline。

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

使用 Tailwind CLI 的一般说明位于安装部分，当前位于其文档中，您需要node安装才能访问该npx命令。

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

1. 更新生成的文件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 类的所有路径，否则清除可能会删除您正在使用的类（有关更多详细信息，请阅读编写可清除的 HTML tailwind 文档）

2. 在开发过程中运行观察程序进程，以便根据您编写的 HTML 不断构建您的 CSS

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

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

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

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

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

4. 确保您有一个部署选项来重新编译 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 输出文件中。

祝你好运。