feat: add Tailwind CSS integration and define base styles

feat/vapor
tangjinzhou 2025-07-28 21:27:23 +08:00
parent ec4017d86f
commit 36a6ed5e34
7 changed files with 22 additions and 75 deletions

View File

@ -1,21 +0,0 @@
{
"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"
}
}

View File

@ -1,35 +0,0 @@
@import 'tailwindcss' source(none);
@import './themes/light.css';
@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%));
}

View File

@ -1,17 +1,17 @@
// @ts-nocheck
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
/**
* @type {import('./index.d.ts').GetUserConfig}
*/
export default dirname =>
defineConfig(({ mode }) => {
const pkg = JSON.parse(readFileSync(resolve(dirname, './package.json'), 'utf-8'));
const isDev = mode === 'development';
const pkg = JSON.parse(readFileSync(resolve(dirname, './package.json'), 'utf-8'))
const isDev = mode === 'development'
return {
plugins: [
dts({
@ -23,29 +23,23 @@ export default dirname =>
}),
],
build: {
cssCodeSplit: true,
lib: {
entry: {
lib: resolve(dirname, 'src/index.ts'),
},
lib: {
entry: {
lib: resolve(dirname, 'src/index.ts'),
},
formats: ['es', 'cjs'],
fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
},
formats: ['es', 'cjs'],
fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
},
rollupOptions: {
external: isDev
? id => {
if (pkg.peerDependencies && id in pkg.peerDependencies) {
return true;
return true
}
if (/^@(ant-design-vue)\//.test(id) || id === 'ant-design-vue') {
return true;
return true
}
return false;
return false
}
: pkg.peerDependencies && Object.keys(pkg.peerDependencies),
},
@ -63,5 +57,5 @@ export default dirname =>
'@': resolve(dirname, './src'),
},
},
};
});
}
})

View File

@ -0,0 +1,5 @@
@reference '../../../style/tailwind.css';
.ant-btn {
@apply text-primary-content;
}

View File

@ -1,3 +1,5 @@
@import 'tailwindcss' source(none);
@theme {
--color-base-100: #ffffff;
--color-base-200: #f7f7f7;

View File

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

View File

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