feat: tailwindcss 支持

package.json

@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-		"@logicflow/core": "^1.2.26",
-		"@logicflow/extension": "^1.2.26",
+    "@logicflow/core": "^1.2.26",
+    "@logicflow/extension": "^1.2.26",
     "@popperjs/core": "^2.11.8",
     "@vant/area-data": "^1.4.0",
     "@vant/touch-emulator": "^1.4.0",
@@ -51,8 +51,8 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.1.0",
-		"sortablejs": "^1.15.0",
     "signature_pad": "^4.1.4",
+    "sortablejs": "^1.15.0",
     "vant": "^4.0.8",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.4.26",
@@ -100,6 +100,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.0.4",
     "unplugin-vue-setup-extend-plus": "^1.0.0",
     "vite": "^4.3.8",

postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
+		tailwindcss: {},
 		autoprefixer: {}
 	}
 }

src/styles/index.scss

@@ -1,5 +1,6 @@
 @import 'src/styles/variables.module';
 @import 'src/styles/element-plus-dark';
+@import './tailwind.scss';
 @import './mixin.scss';
 @import './transition.scss';
 @import 'src/styles/element-plus';

src/styles/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+import type { Config } from 'tailwindcss'
+export default {
+	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+	theme: {
+		extend: {}
+	},
+	plugins: []
+	/*// 这部分 css 需要通过比较复杂的计算得出，所以要用 `safelist` 保证它们出现在最终 css 里
+	safelist: [
+		{
+			pattern: /w-\d+\/\d+/
+		},
+		{
+			pattern: /grid-cols-[5-9]/
+		}
+	]*/
+} satisfies Config