tailwind-preset-antd 0.0.1

package/.github/workflows/gh-pages.yml

@@ -0,0 +1,49 @@
+name: github pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+        # pnpm cache
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install workspace dependencies
+        run: pnpm install
+
+      - name: Build Docs
+        run: pnpm build:play
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./playground/docs-dist

package/.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  }
+}

package/README.en-US.md

@@ -0,0 +1,136 @@
+A tailwindcss plugin based on antd Design Token.
+
+English | [简体中文](./README.zh-CN.md)
+
+# Project Introduction
+
+Version requirements:
+
+- antd >= 5
+- tailwindcss >= 3
+
+Before:
+
+```tsx
+import { theme } from "antd";
+
+function App() {
+  const { token } = theme.useToken();
+
+  return <div style={{ backgroundColor: token.colorPrimary }}></div>;
+}
+```
+
+Now:
+
+```tsx
+function App() {
+  return <div className="bg-colorPrimary"></div>;
+}
+```
+
+## Basic Usage
+
+### tailwindcss v3
+
+1. Register tailwind plugin
+
+```js
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import antdThemePreset from "tailwind-preset-antd/plugin";
+
+const config: Config = {
+  // ...
+  // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [antdThemePreset],
+};
+
+export default config;
+```
+
+2. Register global css variables based on antd token
+
+```jsx
+import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+If you use the `tailwind-merge` plugin, you need to add `fontSizes` to its configuration. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
+
+### tailwindcss v4
+
+See [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
+
+```css
+@plugin "tailwind-preset-antd/plugin";
+
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+*/
+```
+
+```jsx
+import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+## Configuration Options
+
+- `twPrefix`: tw class name prefix, default is `''`
+- `cssVarPrefix`: Generated css var variable prefix, default is `'a'`
+
+For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
+
+```jsx
+/**
+ * :root{
+ *  --abcd-colorPrimary: 47 84 235;
+ * }
+ */
+function App() {
+  return <div className="bg-ant-colorPrimary"></div>;
+}
+
+// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
+```
+
+### Using with tailwind-merge
+
+If you use `tailwind-merge`, additional configuration is required. See [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260) for details on this issue
+
+```js
+import { extendTailwindMerge } from "tailwind-merge";
+import { fontSizes } from "tailwind-preset-antd/preset";
+
+const twMerge = extendTailwindMerge({
+  // prefix:"" // if twPrefix is configured
+  extend: {
+    theme: {
+      text: [...fontSizes], // tw-merge v3
+      // colors:[...colorPresets] // tw-merge v2
+    },
+  },
+});
+```
+
+## Acknowledgments
+
+- [react-antd-admin](https://github.com/condorheroblog/react-antd-admin): The tailwindcss plugin used in this project inspired the development of this repository

package/README.md

@@ -0,0 +1,136 @@
+基于 Antd Design Token 的 tailwindcss 插件。
+
+[English](./README.md) | 简体中文
+
+# 项目介绍
+
+版本要求：
+
+- antd >= 5
+- tailwindcss >= 3
+
+以前：
+
+```tsx
+import { theme } from "antd";
+
+function App() {
+  const { cssVar } = theme.useToken(); // antd v6
+
+  return <div style={{ backgroundColor: cssVar.colorPrimary }}></div>;
+}
+```
+
+现在：
+
+```tsx
+function App() {
+  return <div className="bg-colorPrimary"></div>;
+}
+```
+
+## 基础使用
+
+### tailwindcss v3
+
+1. 注册 tailwind 插件
+
+```js
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import antdThemePreset from "tailwind-preset-antd/plugin";
+
+const config: Config = {
+  // ...
+ // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [antdThemePreset],
+};
+
+export default config;
+```
+
+2. 注册基于 antd token 的全局 css 变量
+
+```jsx
+import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+如果使用了 `tailwind-merge` 插件，则需要将 `fontSizes` 添加至其配置中，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
+
+### tailwindcss v4
+
+查看 [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
+
+```css
+@plugin "tailwind-preset-antd/plugin";
+
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+ */
+```
+
+```jsx
+import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+## 配置项
+
+- `twPrefix`: tw 类名前缀，默认为 `''`
+- `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`
+
+例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
+
+```jsx
+/**
+ * :root{
+ *  --abcd-colorPrimary: 47 84 235;
+ * }
+ */
+function App() {
+  return <div className="bg-ant-colorPrimary"></div>;
+}
+
+// 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
+```
+
+### 与 tailwind-merge 配合使用
+
+如果使用 `tailwind-merge`，需进行额外配置，此问题详见 [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260)
+
+```js
+import { extendTailwindMerge } from "tailwind-merge";
+import { fontSizes } from "tailwind-preset-antd/preset";
+
+const twMerge = extendTailwindMerge({
+  // prefix:"" // 如果配置了 twPrefix
+  extend: {
+    theme: {
+      text: [...fontSizes], // tw-merge v3
+      // colors:[...colorPresets] // tw-merge v2
+    },
+  },
+});
+```
+
+## 鸣谢
+
+- [react-antd-admin](https://github.com/condorheroblog/react-antd-admin)：此项目的 tailwindcss 插件使用启发了此仓库的开发

package/oxfmt.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "oxfmt";
+
+export default defineConfig({
+  useTabs: false,
+  tabWidth: 2,
+  printWidth: 100,
+  arrowParens: "always",
+  bracketSameLine: false,
+  bracketSpacing: true,
+  endOfLine: "lf",
+  jsxSingleQuote: false,
+  quoteProps: "as-needed",
+  semi: true,
+  singleQuote: false,
+  sortPackageJson: true,
+  trailingComma: "es5",
+  sortTailwindcss: {
+    functions: ["clsx", "cn"],
+    preserveWhitespace: true,
+  },
+  ignorePatterns: ["**/node_modules/**", "**/dist/**", "**/pnpm-lock.yaml"],
+});

package/oxlint.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "oxlint";
+
+export default defineConfig({
+  plugins: ["eslint", "typescript", "unicorn", "oxc", "node"],
+  ignorePatterns: ["**/node_modules/**", "**/dist/**", "**/pnpm-lock.yaml"],
+});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "tailwind-preset-antd",
+  "version": "0.0.1",
+  "description": "Use Tailwind CSS with Ant Design tokens",
+  "type": "module",
+  "exports": {
+    "./components": "./dist/components.js",
+    "./plugin": "./dist/plugin.js",
+    "./preset": "./dist/preset.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "play": "vite",
+    "build:play": "vite build",
+    "preview:play": "vite preview",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "ui": "vitest --ui",
+    "snapshot": "vitest -u",
+    "coverage": "vitest --coverage",
+    "release": "bumpp",
+    "prepublishOnly": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check"
+  },
+  "dependencies": {
+    "hex-rgb": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "4.1.5",
+    "bumpp": "^11.0.1",
+    "jsdom": "^29.1.1",
+    "oxfmt": "^0.48.0",
+    "oxlint": "^1.63.0",
+    "postcss": "^8.5.14",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.2.4",
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
+  },
+  "peerDependencies": {
+    "antd": ">=5",
+    "react": ">=18",
+    "tailwindcss": "^3 || ^4"
+  }
+}

package/playground/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tailwind-preset-antd</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/playground/src/App.tsx

@@ -0,0 +1,226 @@
+import { Divider } from "antd";
+
+const colorPalettes = [
+  "red",
+  "volcano",
+  "orange",
+  "lime",
+  "gold",
+  "yellow",
+  "green",
+  "cyan",
+  "blue",
+  "geekblue",
+  "purple",
+  "magenta",
+];
+
+const getColorClass = (color: string, index: number) => {
+  const classes = {
+    red: [
+      "bg-red-1",
+      "bg-red-2",
+      "bg-red-3",
+      "bg-red-4",
+      "bg-red-5",
+      "bg-red-6",
+      "bg-red-7",
+      "bg-red-8",
+      "bg-red-9",
+      "bg-red-10",
+    ],
+    volcano: [
+      "bg-volcano-1",
+      "bg-volcano-2",
+      "bg-volcano-3",
+      "bg-volcano-4",
+      "bg-volcano-5",
+      "bg-volcano-6",
+      "bg-volcano-7",
+      "bg-volcano-8",
+      "bg-volcano-9",
+      "bg-volcano-10",
+    ],
+    orange: [
+      "bg-orange-1",
+      "bg-orange-2",
+      "bg-orange-3",
+      "bg-orange-4",
+      "bg-orange-5",
+      "bg-orange-6",
+      "bg-orange-7",
+      "bg-orange-8",
+      "bg-orange-9",
+      "bg-orange-10",
+    ],
+    lime: [
+      "bg-lime-1",
+      "bg-lime-2",
+      "bg-lime-3",
+      "bg-lime-4",
+      "bg-lime-5",
+      "bg-lime-6",
+      "bg-lime-7",
+      "bg-lime-8",
+      "bg-lime-9",
+      "bg-lime-10",
+    ],
+    gold: [
+      "bg-gold-1",
+      "bg-gold-2",
+      "bg-gold-3",
+      "bg-gold-4",
+      "bg-gold-5",
+      "bg-gold-6",
+      "bg-gold-7",
+      "bg-gold-8",
+      "bg-gold-9",
+      "bg-gold-10",
+    ],
+    yellow: [
+      "bg-yellow-1",
+      "bg-yellow-2",
+      "bg-yellow-3",
+      "bg-yellow-4",
+      "bg-yellow-5",
+      "bg-yellow-6",
+      "bg-yellow-7",
+      "bg-yellow-8",
+      "bg-yellow-9",
+      "bg-yellow-10",
+    ],
+    green: [
+      "bg-green-1",
+      "bg-green-2",
+      "bg-green-3",
+      "bg-green-4",
+      "bg-green-5",
+      "bg-green-6",
+      "bg-green-7",
+      "bg-green-8",
+      "bg-green-9",
+      "bg-green-10",
+    ],
+    cyan: [
+      "bg-cyan-1",
+      "bg-cyan-2",
+      "bg-cyan-3",
+      "bg-cyan-4",
+      "bg-cyan-5",
+      "bg-cyan-6",
+      "bg-cyan-7",
+      "bg-cyan-8",
+      "bg-cyan-9",
+      "bg-cyan-10",
+    ],
+    blue: [
+      "bg-blue-1",
+      "bg-blue-2",
+      "bg-blue-3",
+      "bg-blue-4",
+      "bg-blue-5",
+      "bg-blue-6",
+      "bg-blue-7",
+      "bg-blue-8",
+      "bg-blue-9",
+      "bg-blue-10",
+    ],
+    geekblue: [
+      "bg-geekblue-1",
+      "bg-geekblue-2",
+      "bg-geekblue-3",
+      "bg-geekblue-4",
+      "bg-geekblue-5",
+      "bg-geekblue-6",
+      "bg-geekblue-7",
+      "bg-geekblue-8",
+      "bg-geekblue-9",
+      "bg-geekblue-10",
+    ],
+    purple: [
+      "bg-purple-1",
+      "bg-purple-2",
+      "bg-purple-3",
+      "bg-purple-4",
+      "bg-purple-5",
+      "bg-purple-6",
+      "bg-purple-7",
+      "bg-purple-8",
+      "bg-purple-9",
+      "bg-purple-10",
+    ],
+    magenta: [
+      "bg-magenta-1",
+      "bg-magenta-2",
+      "bg-magenta-3",
+      "bg-magenta-4",
+      "bg-magenta-5",
+      "bg-magenta-6",
+      "bg-magenta-7",
+      "bg-magenta-8",
+      "bg-magenta-9",
+      "bg-magenta-10",
+    ],
+  };
+  return classes[color as keyof typeof classes][index];
+};
+
+export default function App() {
+  return (
+    <div className="text-fontSize p-8">
+      <Divider>Tailwindcss color palettes for antd</Divider>
+      <div className="flex flex-col items-center gap-4 p-4">
+        {colorPalettes.map((color) => (
+          <div key={color} className="flex gap-1">
+            <div className="w-16 text-sm font-bold">{color}</div>
+            <div className="flex gap-1">
+              {Array.from({ length: 10 }, (_, i) => (
+                <div
+                  key={i}
+                  className={`${getColorClass(color, i)} text-colorTextLightSolid flex h-8 w-8 items-center justify-center rounded text-xs`}
+                >
+                  {i + 1}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Divider>Rewrite antd component use plugin</Divider>
+      <div className="flex justify-center gap-6">
+        {/* Card */}
+        <div
+          style={{ width: 300 }}
+          className="text-colorTextHeading border-colorBorderSecondary rounded-borderRadiusLG flex flex-col justify-center border border-solid"
+        >
+          {/* header */}
+          <div className="px-marginLG border-colorBorderSecondary flex h-14 items-center border-b border-solid font-semibold">
+            <div className="flex w-full items-center">
+              <div className="inline-block flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+                Default size card
+              </div>
+              <div className="text-fontSize font-normal">
+                <a className="text-colorPrimary cursor-pointer">More</a>
+              </div>
+            </div>
+          </div>
+          {/* content */}
+          <div className="p-marginLG">
+            <p>Card content</p>
+            <p>Card content</p>
+            <p>Card content</p>
+          </div>
+        </div>
+
+        {/* Button */}
+        <button
+          type="button"
+          className="px-margin rounded-borderRadius bg-colorPrimary text-colorTextLightSolid hover:bg-colorPrimaryHover active:bg-colorPrimaryActive h-8 cursor-pointer transition-colors"
+        >
+          Primary Button
+        </button>
+      </div>
+    </div>
+  );
+}

package/playground/src/global.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+
+/* prettier-ignore */
+@plugin "../../src/plugin.ts";

package/playground/src/index.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ConfigProvider } from "antd";
+import App from "./App";
+import AntdTokenCssVar from "../../src/components";
+import "./global.css";
+
+createRoot(document.querySelector("#app")!).render(
+  <StrictMode>
+    <ConfigProvider>
+      <AntdTokenCssVar />
+      <App />
+    </ConfigProvider>
+  </StrictMode>
+);