时间戳

首页 > 解决方案 > 似乎无法在 Rails 上配置 Tailwind CSS 2

css - 似乎无法在 Rails 上配置 Tailwind CSS 2

问题描述

我正在尝试在 RoR 6.0.3 Ruby 3.0.0 项目中安装 Tailwind CSS，但似乎无法正常工作。我没有收到任何错误消息，但我只是没有在 localhost 的输出中看到样式的任何更新。

任何指导，非常感谢。

tailwind.config.js

...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
...

postcss.config.js

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

javascript/样式表/application.scss

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

应用程序.html.erb

  <head>
    <title>Photos</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("stylesheets/application.scss")

意见/主页/index.html.erb

<h1 class="animate-pulse font-bold text-gray-200 text-2xl mb-6">Photos</h1>

标签： cssruby-on-railstailwind-css

解决方案

推荐阅读