'Why is my Rails 6 and Tailwind setup not working?

I'm running Rails 6.1 and Ruby 2.6.6 and I just can't get tailwind 2.0 css styles to work.

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";

In application.html.haml, I've got

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

In google dev tools, I see this: enter image description here

so it looks like the pack file is loading? But as you can see on the left, there are no styles.

Any ideas?

ruby-on-railswebpacktailwind-csswebpacker


Solution 1:[1]

Make sure webpacker is running. In my case, I had to run bin/webpack-dev-server in a different terminal tab to get it working.

Solution 2:[2]

As I posted here, it might be how you are running your server locally. In a Jumpstart Pro app, you now need to run bin/dev instead of rails s.

Solution 3:[3]

try add the following line in application.html.haml <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Henry Ecker
Solution 2 therealrodk
Solution 3 Angela Chung

Related Questions