yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

安裝完整功能

yarn tailwindcss init

產生一個預設值的配置檔 tailwind.config.js 在你的專案根目錄
創建一個資料夾/app/javascript/styles
把跟目錄下 tailwind.config.js 增加下面內，啟動jit mode

module.exports = {
mode: 'jit'
purge: [
'./app//*.html',
'./app/helpers//.rb',
'./app/views/**/.html.erb',
'./public//*.html',
'./app//*.{js,jsx,ts,tsx,vue}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: []
}

/app/javascript/styles 裡面再創一個 application.scss

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

/app/javascript/styles 裡面再創一個 index.js

// 添加這行
import "./application.scss"

到 /app/javascript/packs/application.js

// 添加這行
import "styles"

到 /app/views/layouts/application.html.erb

// 更改stylesheet_tag為stylesheet_pack
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

根部錄下 postcss.config.js

// 添加這2行
require("tailwindcss"),
require("autoprefixer"),