github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

feat/vapor
tangjinzhou 2025-07-29 11:22:59 +08:00
parent 36a6ed5e34
commit 8f73247bed
15 changed files with 195 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/playground/assets/tailwind.css
View File

@ -1,4 +1,4 @@
@import 'tailwindcss' source(none);
@import '@ant-design-vue/tailwind-config';
@source '../index.html';
@source '../src/**/*.{vue,ts}';
* {

1
apps/playground/package.json
View File

@ -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",

21
packages-config/tailwind-config/package.json Normal file
View File

@ -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"
}
}

34
packages-config/tailwind-config/tailwind.css Normal file
View File

@ -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%));
}

22
packages-config/tailwind-config/themes/light.css Normal file
View File

@ -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;
}

5
packages-config/vite-config/index.d.ts vendored
View File

@ -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,

20
packages-config/vite-config/vite.config.lib.js
View File

@ -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

4
packages-config/vite-config/vite.config.vue.js
View File

@ -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()],

1
packages/ui/package.json
View File

@ -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",

2
packages/ui/src/index.ts
View File

@ -1,4 +1,4 @@
import './style/index.css'
import './style/tailwind.css'
import { App } from 'vue'
import * as components from './components'

4
packages/ui/src/style/base.css
View File

@ -1,6 +1,4 @@
@import 'tailwindcss' source(none);
@theme {
@theme static {
--color-base-100: #ffffff;
--color-base-200: #f7f7f7;
--color-base-300: #ededed;

1
packages/ui/src/style/index.css
View File

@ -1 +0,0 @@
@import './tailwind.css';

2
packages/ui/src/style/tailwind.css
View File

@ -1 +1,3 @@
@import '@ant-design-vue/tailwind-config';
@import './base.css';
@source '../components/**/*.{vue,ts,css}';

61
packages/ui/tailwind.config.js Normal file
View File

@ -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)',
},
},
},
},
}

35
packages/ui/vite.config.ts
View File

@ -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'