♻️ 优化css 避免和tailwind冲突

src/components/index.ts

@@ -1,3 +1,4 @@
+import ElementIcons from '/@/components/SvgIcon/svgicon';
 import Pagination from '/@/components/Pagination/index.vue';
 import RightToolbar from '/@/components/RightToolbar/index.vue';
 import DictTag from '/@/components/DictTag/index.vue';
@@ -5,5 +6,6 @@ import UploadExcel from '/@/components/Upload/Excel.vue';
 import UploadFile from '/@/components/Upload/index.vue';
 import UploadImg from '/@/components/Upload/Image.vue';
 import Editor from '/@/components/Editor/index.vue';
+import Tip from '/@/components/Tip/index.vue';
 
-export { Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor };
+export { ElementIcons, Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor, Tip };

src/i18n/index.ts

@@ -93,7 +93,7 @@ try {
 		i18n.global.mergeLocaleMessage('zh-cn', messageLocal['zh-cn']);
 		i18n.global.mergeLocaleMessage('en', messageLocal['en']);
 		i18n.global.locale.value = themeConfig.value.globalI18n;
-	}, 50);
+	}, 10);
 } catch (e) {
 	// 考虑请求不过去没有后台的情况下导致的i18n失效
 }

src/main.ts

@@ -5,16 +5,14 @@ import router from './router';
 import { directive } from '/@/directive';
 import { i18n } from '/@/i18n';
 import other from '/@/utils/other';
+import '/@/theme/index.scss';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
-
 import VForm3 from 'form-designer-plus'; //引入VForm3库
 import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
 
-import elementIcons from '/@/components/SvgIcon/svgicon';
+import { ElementIcons, Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor, Tip } from '/@/components/index';
-import '/@/theme/index.scss';
-import { Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor } from '/@/components/index';
 import { parseTime, parseDate, dateTimeStr, dateStr, timeStr } from '/@/utils/formatTime';
 import 'highlight.js/styles/atom-one-dark.css';
 import 'highlight.js/lib/common';
@@ -34,6 +32,7 @@ app.component('uploadExcel', UploadExcel);
 app.component('UploadFile', UploadFile);
 app.component('UploadImg', UploadImg);
 app.component('Editor', Editor);
+app.component('Tip', Tip);
 // 导入布局插件
 app.component('Splitpanes', Splitpanes);
 app.component('Pane', Pane);
@@ -51,7 +50,7 @@ app
 	.use(pinia) // pinia 存储
 	.use(router) // 路由
 	.use(ElementPlus, { i18n: i18n.global.t }) // ElementPlus 全局引入
-	.use(elementIcons) // elementIcons 图标全局引入
+	.use(ElementIcons) // elementIcons 图标全局引入
 	.use(VForm3) // 表单设计
 	.use(i18n) // 国际化
 	.use(hljsVuePlugin) // 代码高亮

src/theme/element.scss

@@ -376,8 +376,3 @@
 .el-empty {
 	--el-empty-padding: 0 0 !important;
 }
-
-.el-button {
-	// 防止被tailwindcss默认样式覆盖
-	background-color: var(--el-button-bg-color, var(--el-color-white));
-}

tailwind.config.js

@@ -1,115 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-	theme: {
+	corePlugins: {
-		colors: {
+		// 不使用 tailwind 的基础样式
-			white: 'var(--color-white)',
+		preflight: false,
-			primary: {
+	},
-				DEFAULT: 'var(--el-color-primary)',
-				'light-3': 'var(--el-color-primary-light-3)',
-				'light-5': 'var(--el-color-primary-light-5)',
-				'light-7': 'var(--el-color-primary-light-7)',
-				'light-8': 'var(--el-color-primary-light-8)',
-				'light-9': 'var(--el-color-primary-light-9)',
-				'dark-2': 'var(--el-color-primary-dark-2)',
-			},
-			success: 'var(--el-color-success)',
-			warning: 'var(--el-color-warning)',
-			danger: 'var(--el-color-danger)',
-			error: 'var(--el-color-error)',
-			info: 'var(--el-color-info)',
-			body: 'var(--el-bg-color)',
-			page: 'var(--el-bg-color-page)',
-			'tx-primary': 'var(--el-text-color-primary)',
-			'tx-regular': 'var(--el-text-color-regular)',
-			'tx-secondary': 'var(--el-text-color-secondary)',
-			'tx-placeholder': 'var(--el-text-color-placeholder)',
-			'tx-disabled': 'var(--el-text-color-disabled)',
-			br: 'var(--el-border-color)',
-			'br-light': 'var(--el-border-color-light)',
-			'br-extra-light': 'var(--el-border-color-extra-light)',
-			'br-dark': 'var( --el-border-color-dark)',
-			fill: 'var(--el-fill-color)',
-			'fill-light': 'var(--el-fill-color-light)',
-			'fill-lighter': 'var(--el-fill-color-lighter)',
-			mask: 'var(--el-mask-color)',
-		},
-		fontFamily: {
-			sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif'],
-		},
-		boxShadow: {
-			DEFAULT: 'var(--el-box-shadow)',
-			light: 'var(--el-box-shadow-light)',
-			lighter: 'var(--el-box-shadow-lighter)',
-			dark: 'var(--el-box-shadow-dark)',
-		},
-		fontSize: {
-			xs: 'var(--el-font-size-extra-small)',
-			sm: 'var( --el-font-size-small)',
-			base: 'var( --el-font-size-base)',
-			lg: 'var( --el-font-size-medium)',
-			xl: 'var( --el-font-size-large)',
-			'2xl': 'var( --el-font-size-extra-large)',
-			'3xl': '20px',
-			'4xl': '24px',
-			'5xl': '28px',
-			'6xl': '30px',
-			'7xl': '36px',
-			'8xl': '48px',
-			'9xl': '60px',
-		},
-		spacing: {
-			px: '1px',
-			0: '0px',
-			0.5: '2px',
-			1: '4px',
-			1.5: '6px',
-			2: '8px',
-			2.5: '10px',
-			3: '12px',
-			3.5: '14px',
-			4: '16px',
-			5: '20px',
-			6: '24px',
-			7: '28px',
-			8: '32px',
-			9: '36px',
-			10: '40px',
-			11: '44px',
-			12: '48px',
-			14: '56px',
-			16: '64px',
-			20: '80px',
-			24: '96px',
-			28: '112px',
-			32: '128px',
-			36: '144px',
-			40: '160px',
-			44: '176px',
-			48: '192px',
-			52: '208px',
-			56: '224px',
-			60: '240px',
-			64: '256px',
-			72: '288px',
-			80: '320px',
-			96: '384px',
-		},
-		lineHeight: {
-			none: '1',
-			tight: '1.25',
-			snug: '1.375',
-			normal: '1.5',
-			relaxed: '1.625',
-			loose: '2',
-			3: '12px',
-			4: '16px',
-			5: '20px',
-			6: '24px',
-			7: '28px',
-			8: '32px',
-			9: '36px',
-			10: '40px',
-		},
-	}
 };