feat: integrate @ant-design-vue/tailwind-config and update styles for UI components

tangjinzhou · tangjinzhou · commit 8f73247bed6a · 2025-07-29T11:22:59.000+08:00
diff --git a/apps/playground/assets/tailwind.css b/apps/playground/assets/tailwind.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss' source(none);
+@import '@ant-design-vue/tailwind-config';
 @source '../index.html';
 @source '../src/**/*.{vue,ts}';
 * {
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -29,6 +29,7 @@
     "@ant-design-vue/prettier-config": "*",
     "@ant-design-vue/typescript-config": "*",
     "@ant-design-vue/vite-config": "*",
+    "@ant-design-vue/tailwind-config": "*",
     "@tailwindcss/vite": "^4.1.3",
     "@types/cookies": "^0.9.0",
     "@types/node": "^20.0.0",
diff --git a/packages-config/tailwind-config/package.json b/packages-config/tailwind-config/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ant-design-vue/tailwind-config",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    ".": {
+      "default": "./tailwind.css"
+    },
+    "./themes/*": {
+      "default": "./themes/*.css"
+    }
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.9",
+    "@tailwindcss/typography": "^0.5.16"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4",
+    "@tailwindcss/typography": "^0.5.16"
+  }
+}
diff --git a/packages-config/tailwind-config/tailwind.css b/packages-config/tailwind-config/tailwind.css
@@ -0,0 +1,34 @@
+@import 'tailwindcss' source(none);
+@plugin '@tailwindcss/typography';
+
+@utility text-tint-* {
+  color: color-mix(in srgb, --value(--color-*, [*]), white calc(--modifier(integer) * 1%));
+}
+
+@utility text-shade-* {
+  color: color-mix(in srgb, --value(--color-*, [*]), black calc(--modifier(integer) * 1%));
+}
+
+@utility bg-tint-* {
+  background-color: color-mix(
+    in srgb,
+    --value(--color-*, [*]),
+    white calc(--modifier(integer) * 1%)
+  );
+}
+
+@utility bg-shade-* {
+  background-color: color-mix(
+    in srgb,
+    --value(--color-*, [*]),
+    black calc(--modifier(integer) * 1%)
+  );
+}
+
+@utility border-tint-* {
+  border-color: color-mix(in srgb, --value(--color-*, [*]), white calc(--modifier(integer) * 1%));
+}
+
+@utility border-shade-* {
+  border-color: color-mix(in srgb, --value(--color-*, [*]), black calc(--modifier(integer) * 1%));
+}
diff --git a/packages-config/tailwind-config/themes/light.css b/packages-config/tailwind-config/themes/light.css
@@ -0,0 +1,22 @@
+@theme {
+  --color-base-100: #ffffff;
+  --color-base-200: #f7f7f7;
+  --color-base-300: #ededed;
+  --color-base-content: #222222;
+  --color-primary: #151415;
+  --color-primary-content: #ffffff;
+  --color-secondary: #0d58fc;
+  --color-secondary-content: #ffffff;
+  --color-accent: #0289ff;
+  --color-accent-content: #ffffff;
+  --color-neutral: #666666;
+  --color-neutral-content: #ffffff;
+  --color-info: #0d58fc;
+  --color-info-content: #ffffff;
+  --color-success: #00c573;
+  --color-success-content: #ffffff;
+  --color-warning: #ff9900;
+  --color-warning-content: #ffffff;
+  --color-error: #ff3333;
+  --color-error-content: #ffffff;
+}
diff --git a/packages-config/vite-config/index.d.ts b/packages-config/vite-config/index.d.ts
@@ -1,6 +1,9 @@
 import { UserConfig, UserConfigFnObject } from 'vite'
 
-export type GetUserConfig = (dirname: string) => UserConfig | UserConfigFnObject
+export type GetUserConfig = (
+  dirname: string,
+  overwriteLib?: boolean,
+) => UserConfig | UserConfigFnObject
 
 export declare function extendsConfig(
   base: UserConfig | UserConfigFnObject,
diff --git a/packages-config/vite-config/vite.config.lib.js b/packages-config/vite-config/vite.config.lib.js
@@ -8,7 +8,7 @@ import dts from 'vite-plugin-dts'
 /**
  * @type {import('./index.d.ts').GetUserConfig}
  */
-export default dirname =>
+export default (dirname, overwriteLib) =>
   defineConfig(({ mode }) => {
     const pkg = JSON.parse(readFileSync(resolve(dirname, './package.json'), 'utf-8'))
     const isDev = mode === 'development'
@@ -23,20 +23,22 @@ export default dirname =>
         }),
       ],
       build: {
-        lib: {
-          entry: {
-            lib: resolve(dirname, 'src/index.ts'),
-          },
-          formats: ['es', 'cjs'],
-          fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
-        },
+        lib: overwriteLib
+          ? undefined
+          : {
+              entry: {
+                lib: resolve(dirname, 'src/index.ts'),
+              },
+              formats: ['es', 'cjs'],
+              fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
+            },
         rollupOptions: {
           external: isDev
             ? id => {
                 if (pkg.peerDependencies && id in pkg.peerDependencies) {
                   return true
                 }
-                if (/^@(ant-design-vue)\//.test(id) || id === 'ant-design-vue') {
+                if (/^@(ant-design-vue)\//.test(id)) {
                   return true
                 }
                 return false
diff --git a/packages-config/vite-config/vite.config.vue.js b/packages-config/vite-config/vite.config.vue.js
@@ -6,9 +6,9 @@ import lib from './vite.config.lib.js'
 /**
  * @type {import('./index.d.ts').GetUserConfig}
  */
-export default dirname =>
+export default (dirname, overwriteLib) =>
   extendsConfig(
-    lib(dirname),
+    lib(dirname, overwriteLib),
     defineConfig(({ mode }) => {
       return {
         plugins: [vue()],
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -79,6 +79,7 @@
     "@ant-design-vue/prettier-config": "*",
     "@ant-design-vue/typescript-config": "*",
     "@ant-design-vue/vite-config": "*",
+    "@ant-design-vue/tailwind-config": "*",
     "@tailwindcss/vite": "^4.1.3",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vueuse/core": "^12.0.0",
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,4 +1,4 @@
-import './style/index.css'
+import './style/tailwind.css'
 import { App } from 'vue'
 
 import * as components from './components'
diff --git a/packages/ui/src/style/base.css b/packages/ui/src/style/base.css
@@ -1,6 +1,4 @@
-@import 'tailwindcss' source(none);
-
-@theme {
+@theme static {
   --color-base-100: #ffffff;
   --color-base-200: #f7f7f7;
   --color-base-300: #ededed;
diff --git a/packages/ui/src/style/index.css b/packages/ui/src/style/index.css
diff --git a/packages/ui/src/style/tailwind.css b/packages/ui/src/style/tailwind.css
@@ -1 +1,3 @@
+@import '@ant-design-vue/tailwind-config';
 @import './base.css';
+@source '../components/**/*.{vue,ts,css}';
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}', './src/**/*.css'],
+  safelist: [
+    // 强制包含所有主题颜色类
+    {
+      pattern:
+        /^(text|bg|border)-(base|primary|secondary|accent|neutral|info|success|warning|error)(-\d+)?$/,
+      variants: ['hover', 'focus', 'active', 'disabled'],
+    },
+    {
+      pattern:
+        /^(text|bg|border)-(base|primary|secondary|accent|neutral|info|success|warning|error)-content$/,
+      variants: ['hover', 'focus', 'active', 'disabled'],
+    },
+  ],
+  theme: {
+    extend: {
+      colors: {
+        base: {
+          100: 'var(--color-base-100)',
+          200: 'var(--color-base-200)',
+          300: 'var(--color-base-300)',
+          content: 'var(--color-base-content)',
+        },
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          content: 'var(--color-primary-content)',
+        },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          content: 'var(--color-secondary-content)',
+        },
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          content: 'var(--color-accent-content)',
+        },
+        neutral: {
+          DEFAULT: 'var(--color-neutral)',
+          content: 'var(--color-neutral-content)',
+        },
+        info: {
+          DEFAULT: 'var(--color-info)',
+          content: 'var(--color-info-content)',
+        },
+        success: {
+          DEFAULT: 'var(--color-success)',
+          content: 'var(--color-success-content)',
+        },
+        warning: {
+          DEFAULT: 'var(--color-warning)',
+          content: 'var(--color-warning-content)',
+        },
+        error: {
+          DEFAULT: 'var(--color-error)',
+          content: 'var(--color-error-content)',
+        },
+      },
+    },
+  },
+}
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -2,8 +2,32 @@ import { extendsConfig } from '@ant-design-vue/vite-config'
 import vue from '@ant-design-vue/vite-config/vue'
 import { resolve } from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
+import { readdirSync, statSync } from 'node:fs'
+import dts from 'vite-plugin-dts'
 
-export default extendsConfig(vue(__dirname), {
+// 获取所有组件目录
+function getComponents() {
+  const componentsDir = resolve(__dirname, 'src/components')
+  const components: Record<string, string> = {}
+
+  try {
+    const entries = readdirSync(componentsDir)
+    entries.forEach(entry => {
+      const fullPath = resolve(componentsDir, entry)
+      if (statSync(fullPath).isDirectory()) {
+        components[`components/${entry}`] = resolve(fullPath, 'index.ts')
+      }
+    })
+  } catch (error) {
+    console.warn('Failed to read components directory:', error)
+  }
+
+  return components
+}
+
+const components = getComponents()
+
+export default extendsConfig(vue(__dirname, true), {
   resolve: {
     alias: {
       '~': resolve(__dirname, './assets'),
@@ -12,9 +36,16 @@ export default extendsConfig(vue(__dirname), {
   plugins: [tailwindcss()],
   build: {
     cssCodeSplit: true,
+    lib: {
+      entry: {
+        lib: resolve(__dirname, 'src/index.ts'),
+        ...components,
+      },
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
+    },
     rollupOptions: {
       output: {
-        // inlineDynamicImports: false,
         manualChunks(id) {
           if (id.includes('tailwind.css')) {
             return 'tailwind'

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import 'tailwindcss' source(none);`
	`1`	`+@import '@ant-design-vue/tailwind-config';`
`2`	`2`	`@source '../index.html';`
`3`	`3`	`@source '../src/*/.{vue,ts}';`
`4`	`4`	`* {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import './style/index.css'`
	`1`	`+import './style/tailwind.css'`
`2`	`2`	`import { App } from 'vue'`
`3`	`3`
`4`	`4`	`import * as components from './components'`