vue3+element plus 使用tailwindcss_elementplus tailwindcss

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: []
}
1
2
3
4
5
6
7
8

2.2 根目录创建 postcss.config.js

// postcss.config.js
module.exports = {
	plugins: { 
		tailwindcss: {}, 
		autoprefixer: {} 
		}
}
1
2
3
4
5
6
7

3. 创建一个名为 tailwind.css文件

例如 assets/style/tailwind.css·

 /*assets/style/tailwind.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
1
2
3
4

4. 在man.ts下引入tailwind.css

// main.ts
import '@/assets/style/tailwind.css'
1
2

5. 在你的 HTML 代码中使用 Tailwind

Tailwind 和 element plus button样式冲突解决方案

1. 在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 // 关闭默认样式
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

2. 创建preflight.css文件,将下面链接里的样式复制到preflight.css中并注释 184行button冲突样式
   https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css

3. 将preflight.css引入至tailwind.css中

 /*assets/style/tailwind.css*/
 
@import 'tailwindcss/base';
@import './preflight.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
1
2
3
4
5
6

vsCode Tailwind插件

Tailwind CSS IntelliSense