1. 安装Tailwind CSS相关依赖
npm i -D tailwindcss postcss autoprefixer
2. 创建配置文件
2.1 根目录创建 tailwind.config.js
命令 npx tailwindcss init
// tailwind.config.js
module.exports = {
content: ['index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
theme: {
extend: {}
},
plugins: []
}
2.2 根目录创建 postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
3. 创建一个名为 tailwind.css文件
例如 assets/style/tailwind.css
·
/*assets/style/tailwind.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
4. 在man.ts下引入tailwind.css
// main.ts
import '@/assets/style/tailwind.css'
5. 在你的 HTML 代码中使用 Tailwind
Tailwind 和 element plus button样式冲突解决方案
- 在tailwind.config.js中关闭默认样式
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
theme: {
extend: {}
},
plugins: [],
corePlugins: {
preflight: false // 关闭默认样式
}
}
-
创建preflight.css文件,将下面链接里的样式复制到preflight.css中并注释 184行button冲突样式
https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css
-
将preflight.css引入至tailwind.css中
/*assets/style/tailwind.css*/
@import 'tailwindcss/base';
@import './preflight.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
vsCode Tailwind插件
Tailwind CSS IntelliSense