无法将 Tailwindcss 安装到 Rails 6答案

【问题标题】：Unable to install Tailwindcss into Rails 6无法将 Tailwindcss 安装到 Rails 6
【发布时间】：2019-10-23 20:58:36
【问题描述】：

我目前正在尝试通过 Webpack 将 Tailwind 安装到 Rails 6 应用程序中，但在遵循文档之后，样式并未应用于视图模板，如图所示。我有 Tailwind v1.0.3。我还尝试将 Webpack 升级到 v4，所以不确定是不是因为这个原因。

我有以下文件：

javascript/css/application.css

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

我的 packs/application.js 如下所示：

require("stylesheets/application.scss")

还有我的 /postcss.config.js

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

我还可以从 packaje.json 文件中看到 Tailwind 实际上已安装。

{
  "name": "artsy_space",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "tailwindcss": "^1.0.3",
    "vue": "^2.5.17",
    "vue-loader": "14.2.2",
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

和 application.html.erb

        <!DOCTYPE html>
    <html>
      <head>
        <title>ArtsySpace</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>

      <body>
          <p class="alert alert-error">
            <%= flash[:alert] %>
          </p>

          <p class="alert alert-info">
            <%= flash[:notice] %>
          </p>
        <%= yield %>
      </body>
    </html>

H

在 repo 中有一个 link to a PR。

知道可能是什么吗？

【问题讨论】：

标签： webpacker tailwind-css ruby-on-rails-6

【解决方案1】：

看来您可能需要错误的目录。尝试改变：

require("stylesheets/application.scss")

到：

require("css/application.css")

另外，请注意，您需要一个 .scss 文件，但看起来实际文件是 .css？

【讨论】：

【解决方案2】：

尝试将此行添加到您的 javascript/packs/application.js 文件中

require("stylesheets/application.scss")

其他一切看起来都正确。

我还假设您在控制台中运行了 yarn add tailwindcss。

如果添加该文件不起作用，请尝试在控制台中运行 bin/webpack。

如果有任何错误消息，它们将帮助您调试问题。

【讨论】：