如何通过 PostCSS 清除将 Tailwind CSS 添加到 rails 5？

Question

我想将 tailwindcss 添加到新的 rails 5.2.5 项目中。因为我喜欢 tailwind 但知道重量很重，所以我也想要一个 purge css 模块。

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

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

谢谢！

Answer 1

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

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

有关使用 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 classes 的路径，否则清除可能会删除您正在使用的 classes (read Writing purgeable HTML tailwind docs for more details)

在开发过程中运行观察程序进程，因此您的 CSS 会根据您编写的 HTML 不断构建

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

请注意，我将生成的顺风样式放入 vendor/assets，但您可以将它们放置在资产管道寻找的任何地方 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 classes 的默认样式。使用此设置也可以做到这一点。为此，您需要为 Tailwind 编译期间使用的基础 classes 添加一个额外文件。这里重要的是不要将此文件添加到您的 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 输出文件中。

祝你好运。

如何通过 PostCSS 清除将 Tailwind CSS 添加到 rails 5？

how to add Tailwind CSS with PostCSS purge to rails 5?

ruby

ruby-on-rails-5

postcss

tailwind-css