Ruby on Rails 6にTailwindCSSを導入（Gemを使わず）

Yarnで必要なものをインストールする

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

tailwind.config.jsファイルを生成する

yarn tailwindcss init app/javascript/packs/tailwind.config.js

app/javascript/packs/tailwind.config.js

module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/**/*.html.slim',
    './app/helpers/**/*.rb',
    './app/javascript/packs/**/*.js',
  ],
  // 省略

postcss.config.jsファイルを編集する

postcss.config.js

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

TailwindCSSの必要なファイルをインポートする

app/assets/stylesheets/application.scss

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

app/javascript/packs/application.js

import '../../assets/stylesheets/application.scss'

終わり