如何在rails中使用webpacker安装tailwindcss [关闭]

Posted 2023-03-07

【中文标题】如何在rails中使用webpacker安装tailwindcss [关闭]

【英文标题】：How to install tailwindcss with webpacker in rails [closed]

【发布时间】：2021-02-27 04:39:35

【问题描述】：

我想用 webpacker 和 Ruby on Rails 安装 tailwindcss。

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

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

我的app/views/layouts/application.html.slim 中正确地同时拥有stylesheet_pack_tag 和javascript_pack_tag

【参考方案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"

【讨论】：

这个答案是否适用于需要 PostCSS 8 的 Tailwind CSS V2.0？

我不知道，我在tailwindcss 1.9.6