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'
終わり