如何在 rails 中使用 webpacker 安装 tailwindcss

Question

我想在 Rails.Ruby 上安装带 webpacker 的 tailwindcss。

我遵循了一些教程，但都已经过时了。

我遇到了 webpacker 错误，或者 css 无法加载。

我的 app/views/layouts/application.html.slim

中正确地同时包含了 stylesheet_pack_tag 和 javascript_pack_tag

Answer 1

rails webpacker:install
yarn add tailwindcss
npx tailwindcss init

然后在 postcss.config.js 添加 require('tailwindcss'):

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('tailwindcss'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

并在 app/javascript/css/application.scss 中：

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

然后在 app/javascript/packs/application.js:

import "../css/application.scss"

如何在 rails 中使用 webpacker 安装 tailwindcss

How to install tailwindcss with webpacker in rails

ruby-on-rails

ruby

tailwind-css

webpacker