我想将 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 设置顺风的便捷指南？我真的很喜欢大多数宝石的自动方法，但找不到方便的解决方案。
谢谢！
【问题讨论】：
标签： ruby ruby-on-rails-5 tailwind-css postcss
可以在不使用 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)
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
如果文件位于您的资产路径中，样式将被导入。
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，它将收集所有基本样式集并将它们编译到顺风输出文件中。
祝你好运。
【讨论】：