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

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

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

1
2
3
4
5
6
7
8
module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/**/*.html.slim',
    './app/helpers/**/*.rb',
    './app/javascript/packs/**/*.js',
  ],
  // 省略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
    })
  ]
}

1
2
3
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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