feat: add Tailwind CSS integration and define base styles

packages-config/tailwind-config/package.json

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

packages-config/tailwind-config/tailwind.css

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

packages-config/vite-config/vite.config.lib.js

@@ -1,17 +1,17 @@
 // @ts-nocheck
 
-import { readFileSync } from 'node:fs';
+import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path';
+import { resolve } from 'node:path'
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts';
+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 pkg = JSON.parse(readFileSync(resolve(dirname, './package.json'), 'utf-8'))
-    const isDev = mode === 'development';
+    const isDev = mode === 'development'
     return {
       plugins: [
         dts({
@@ -23,11 +23,6 @@ export default dirname =>
         }),
       ],
       build: {
-        cssCodeSplit: true,
-        lib: {
-          entry: {
-            lib: resolve(dirname, 'src/index.ts'),
-          },
         lib: {
           entry: {
             lib: resolve(dirname, 'src/index.ts'),
@@ -35,17 +30,16 @@ export default dirname =>
           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'),
         },
       },
-    };
+    }
-  });
+  })

packages/ui/src/components/button/style/index.css

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

packages/ui/src/style/base.css

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

packages/ui/src/style/index.css

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

packages/ui/src/style/tailwind.css

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