Day-24 : 开发时，使用到tailwindCSS，今天来讲安装

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"),