为什么我的 Rails 6 和 Tailwind 设置不起作用？

Question

我正在运行 Rails 6.1 和 Ruby 2.6.6，但无法使用 tailwind 2.0 css 样式。

webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
    inline: true
    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
    overlay: true
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    disable_host_check: true
    # This option lets the browser open with your local IP
    use_local_ip: false
    # When enabled, nothing except the initial startup information will be written to the console.
    # This also means that errors or warnings from webpack are not visible.
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

postcss.config.js

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

tailwind.config.js

module.exports = {
  purge: [
    './app/**/*/*.html.erb',
    './app/helpers/**/*/*.rb',
    './app/javascript/**/*/*.js',
    './app/javascript/**/*/*.vue',
    './app/javascript/**/*/*.react'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    // not needed here ?
    // require('@tailwindcss/forms'),
  ],
}

package.json

{
  "dependencies": {
    "@rails/ujs": "^6.1.3-1",
    "@rails/webpacker": "^6.0.0-beta.7",
    "alpine-turbo-drive-adapter": "^1.0.4",
    "alpinejs": "^2.8.2",
    "autoprefixer": "^10.2.5",
    "css-loader": "^5.2.4",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.13",
    "sass": "^1.32.12",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.1.2",
    "turbolinks": "^5.2.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "devDependencies": {
    "@webpack-cli/serve": "^1.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

app/javascript/packs/application.js

import Rails from "@rails/ujs"
Rails.start()

require("turbolinks").start()

// import alpinejs and its necessary rails adaptation
import 'alpine-turbo-drive-adapter'
require("alpinejs")

// import tailwind into javascript
import "./application.scss"

// require("./application.scss")

app/javascript/packs/application.scss

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

在application.html.haml，我有

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

在谷歌开发工具中，我看到了这个：

所以看起来包文件正在加载？但正如您在左侧看到的那样，没有样式。

有什么想法吗？

Answer 1

尝试在 application.html.haml 中添加以下行 <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">

Answer 2

确保 webpacker 正在运行。就我而言，我必须在不同的终端选项卡中运行 bin/webpack-dev-server 才能使其正常工作。