Browse Source

feat: 集成tailwindcss

hanxiaohui 2 months ago
parent
commit
38771a293d
5 changed files with 17 additions and 2 deletions
  1. 2 0
      package.json
  2. 3 0
      src/assets/styles/tailwindcss.css
  3. 1 1
      src/main.js
  4. 9 0
      tailwind.config.js
  5. 2 1
      vite.config.js

+ 2 - 0
package.json

@@ -33,6 +33,7 @@
     "@antv/x6-react-components": "^2.0.0",
     "@antv/x6-react-shape": "^2.0.0",
     "@antv/x6-vue-shape": "^2.0.0",
+    "@tailwindcss/vite": "^4.1.12",
     "@vueup/vue-quill": "^1.2.0",
     "@wangeditor/editor": "5.1.14",
     "@wangeditor/editor-for-vue": "5.1.12",
@@ -62,6 +63,7 @@
     "sm-crypto": "0.3.13",
     "sortablejs": "1.15.0",
     "store": "^2.0.12",
+    "tailwindcss": "^4.1.12",
     "ua-parser-js": "1.0.35",
     "uuid": "^10.0.0",
     "v-viewer": "~1.6.4",

+ 3 - 0
src/assets/styles/tailwindcss.css

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

+ 1 - 1
src/main.js

@@ -4,7 +4,7 @@
  * @Author:    DCCloud
  * @Date:      2022-09-06 20:59:23
  */
-
+import '/@/assets/styles/tailwindcss.css'
 import { createApp } from 'vue';
 import VantUi from 'vant'
 import "vant/lib/index.css";

+ 9 - 0
tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    important: true,
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};

+ 2 - 1
vite.config.js

@@ -8,6 +8,7 @@ import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import customVariables from '/@/theme/custom-variables.js';
+import tailwindcss from '@tailwindcss/vite'
 
 const pathResolve = (dir) => {
   return resolve(__dirname, '.', dir);
@@ -57,7 +58,7 @@ export default {
     },
     open: true, // 项目启动后,自动打开
   },
-  plugins: [vue(), vueJsx({})],
+  plugins: [vue(), vueJsx({}), tailwindcss()],
   optimizeDeps: {
     include: ['ant-design-vue/es/locale/zh_CN', 'dayjs/locale/zh-cn', 'ant-design-vue/es/locale/en_US'],
     exclude: ['vue-demi'],