How to install tailwindcss with webpacker in rails

Question

i want to install tailwindcss with webpacker with Ruby on Rails.

I followed some tutorials but there were all outdated.

I was getting webpacker error, or the css would not load.

I correctly have both stylesheet_pack_tag and javascript_pack_tag in my app/views/layouts/application.html.slim

Answer 1

rails webpacker:install
yarn add tailwindcss
npx tailwindcss init

then in postcss.config.js add require('tailwindcss'):

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

and in app/javascript/css/application.scss:

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

then in app/javascript/packs/application.js:

import "../css/application.scss"