安装 [Vue 2]
vue3直接参考官网
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
初始化
- 配置文件
# 创建一个空的tainwind css配置文件
npx tailwindcss init
# or
# 你也可以创建一个包含有所有默认配置的文件
npx tailwindcss init -fill
# 两种方法效果一样
- postcss.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- index.css
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- main.js
import './index.css'
- 安装sass
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"style-loader": "^3.3.1",
hover尺寸放大
transition duration-150 ease-in-out transform hover:scale-110;