tailwind-preset-antd 0.1.1 → 0.1.3

package/README.en-US.md

@@ -1,135 +1,135 @@
-Use antd design token like using tailwindcss.
-
-Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
-
-[简体中文](./README.md) | English
-
-# Project Introduction
-
-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 v4
-
-Use plugin in your css
-
-```css
-@plugin "tailwind-preset-antd/plugin";
-
-/* or
-@plugin "tailwind-preset-antd/plugin" {
-  twPrefix: "ant";
-  cssVarPrefix: "abcd";
-}
-*/
-```
-
-Inject css variables component in any component
-
-```tsx
-import AntdTokenCssVar from "tailwind-preset-antd/components";
-
-export default function App() {
-  return (
-    <>
-      <AntdTokenCssVar />
-    </>
-  );
-}
-```
-
-### tailwindcss v3
-
-Use plugin in your `tailwind.config.ts`
-
-```ts
-// tailwind.config.ts
-import type { Config } from "tailwindcss/types/config";
-import tailwindPresetAntd from "tailwind-preset-antd/plugin";
-
-const config: Config = {
-  // ...
-  // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
-  plugins: [tailwindPresetAntd],
-};
-
-export default config;
-```
-
-Inject css variables component in any component
-
-```tsx
-import AntdTokenCssVar from "tailwind-preset-antd/components";
-
-export default function App() {
-  return (
-    <>
-      <AntdTokenCssVar />
-    </>
-  );
-}
-```
-
-If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
-
-## Configuration Options
-
-- `twPrefix`: tw class name prefix, default is `''`
-- `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
-
-For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
-
-```tsx
-/**
- * :root{
- *  --abcd-colorPrimary: 47 84 235;
- * }
- */
-function App() {
-  return <div className="bg-ant-colorPrimary"></div>;
-}
-
-// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-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
+Use antd design token like using tailwindcss.
+
+Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
+
+[简体中文](./README.md) | English
+
+# Project Introduction
+
+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 v4
+
+Use plugin in your css
+
+```css
+@plugin "tailwind-preset-antd/plugin";
+
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+*/
+```
+
+Import `AntdTokenCssVar` in your component. If you use theme switching, `AntdTokenCssVar` must be used inside antd `ConfigProvider`
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+### tailwindcss v3
+
+Use plugin in your `tailwind.config.ts`
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import tailwindPresetAntd from "tailwind-preset-antd/plugin";
+
+const config: Config = {
+  // ...
+  // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [tailwindPresetAntd],
+};
+
+export default config;
+```
+
+Import `AntdTokenCssVar` in your component. If you use theme switching, `AntdTokenCssVar` must be used inside antd `ConfigProvider`
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
+
+## Configuration Options
+
+- `twPrefix`: tw class name prefix, default is `''`
+- `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
+
+For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
+
+```tsx
+/**
+ * :root{
+ *  --abcd-colorPrimary: 47 84 235;
+ * }
+ */
+function App() {
+  return <div className="bg-ant-colorPrimary"></div>;
+}
+
+// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-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

@@ -1,135 +1,135 @@
-像使用 tailwindcss 一样使用 antd design token。
-
-提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
-
-[English](./README.en-US.md) | 简体中文
-
-# 项目介绍
-
-以前：
-
-```tsx
-import { theme } from "antd";
-
-function App() {
-  const { token } = theme.useToken();
-
-  return <div style={{ backgroundColor: token.colorPrimary }}></div>;
-}
-```
-
-现在：
-
-```tsx
-function App() {
-  return <div className="bg-colorPrimary"></div>;
-}
-```
-
-## 基础使用
-
-### tailwindcss v4
-
-在你的 css 中使用插件
-
-```css
-@plugin "tailwind-preset-antd/plugin";
-
-/* or
-@plugin "tailwind-preset-antd/plugin" {
-  twPrefix: "ant";
-  cssVarPrefix: "abcd";
-}
- */
-```
-
-在你的任意组件中注入 css 变量的组件
-
-```tsx
-import AntdTokenCssVar from "tailwind-preset-antd/components";
-
-export default function App() {
-  return (
-    <>
-      <AntdTokenCssVar />
-    </>
-  );
-}
-```
-
-### tailwindcss v3
-
-在你的 `tailwind.config.ts` 中使用插件
-
-```js
-// tailwind.config.ts
-import type { Config } from "tailwindcss/types/config";
-import tailwindPresetAntd from "tailwind-preset-antd/plugin";
-
-const config: Config = {
-  // ...
- // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
-  plugins: [tailwindPresetAntd],
-};
-
-export default config;
-```
-
-在你的任意组件中注入 css 变量的组件
-
-```tsx
-import AntdTokenCssVar from "tailwind-preset-antd/components";
-
-export default function App() {
-  return (
-    <>
-      <AntdTokenCssVar />
-    </>
-  );
-}
-```
-
-如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
-
-## 配置项
-
-- `twPrefix`: tw 类名前缀，默认为 `''`
-- `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
-
-例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
-
-```tsx
-/**
- * :root{
- *  --abcd-colorPrimary: 47 84 235;
- * }
- */
-function App() {
-  return <div className="bg-ant-colorPrimary"></div>;
-}
-
-// 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-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 插件使用启发了此仓库的开发
+像使用 tailwindcss 一样使用 antd design token。
+
+提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
+
+[English](./README.en-US.md) | 简体中文
+
+# 项目介绍
+
+以前：
+
+```tsx
+import { theme } from "antd";
+
+function App() {
+  const { token } = theme.useToken();
+
+  return <div style={{ backgroundColor: token.colorPrimary }}></div>;
+}
+```
+
+现在：
+
+```tsx
+function App() {
+  return <div className="bg-colorPrimary"></div>;
+}
+```
+
+## 基础使用
+
+### tailwindcss v4
+
+在你的 css 中使用插件
+
+```css
+@plugin "tailwind-preset-antd/plugin";
+
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+ */
+```
+
+在你的组件中导入 `AntdTokenCssVar`。如果你使用主题切换，则 `AntdTokenCssVar` 必须在 antd `ConfigProvider` 中使用
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+### tailwindcss v3
+
+在你的 `tailwind.config.ts` 中使用插件
+
+```js
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import tailwindPresetAntd from "tailwind-preset-antd/plugin";
+
+const config: Config = {
+  // ...
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [tailwindPresetAntd],
+};
+
+export default config;
+```
+
+在你的组件中导入 `AntdTokenCssVar`。如果你使用主题切换，则 `AntdTokenCssVar` 必须在 antd `ConfigProvider` 中使用
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
+
+export default function App() {
+  return (
+    <>
+      <AntdTokenCssVar />
+    </>
+  );
+}
+```
+
+如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
+
+## 配置项
+
+- `twPrefix`: tw 类名前缀，默认为 `''`
+- `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
+
+例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
+
+```tsx
+/**
+ * :root{
+ *  --abcd-colorPrimary: 47 84 235;
+ * }
+ */
+function App() {
+  return <div className="bg-ant-colorPrimary"></div>;
+}
+
+// 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-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/dist/components.js

@@ -17,9 +17,6 @@ function AntdTokenCssVar(props) {
 		style.setAttribute("plugin-name", "tailwind-preset-antd");
 		style.textContent = `:root{${cssVar}}`;
 		document.head.appendChild(style);
-		return () => {
-			document.head.removeChild(style);
-		};
 	}, [token, cssVarPrefix]);
 	return null;
 }

package/dist/preset/tokens/semanticColors.js

@@ -15,6 +15,8 @@ const semanticColors = [
 	"colorBgLayout",
 	"colorBgSpotlight",
 	"colorBgMask",
+	"colorBgTextHover",
+	"colorBgTextActive",
 	"colorBorder",
 	"colorBorderSecondary",
 	"colorFill",

package/package.json

@@ -1,76 +1,75 @@
-{
-  "name": "tailwind-preset-antd",
-  "version": "0.1.1",
-  "description": "Use antd design token like using tailwindcss",
-  "keywords": [
-    "antd",
-    "tailwindcss"
-  ],
-  "homepage": "https://json-q.github.io/tailwind-preset-antd/",
-  "license": "MIT",
-  "author": "json-q",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
-  },
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "sideEffects": false,
-  "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 run --coverage",
-    "release": "bumpp",
-    "prepublishOnly": "pnpm run build",
-    "lint:package": "publint",
-    "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.2",
-    "@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.1.0",
-    "jsdom": "^29.1.1",
-    "oxfmt": "^0.48.0",
-    "oxlint": "^1.63.0",
-    "postcss": "^8.5.14",
-    "publint": "^0.3.19",
-    "react-dom": "^19.2.6",
-    "tailwindcss": "^4.2.4",
-    "tsdown": "^0.22.0",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.11",
-    "vitest": "^4.1.5"
-  },
-  "peerDependencies": {
-    "antd": ">=5",
-    "react": ">=16.9.0",
-    "tailwindcss": "^3 || ^4"
-  }
-}
+{
+  "name": "tailwind-preset-antd",
+  "version": "0.1.3",
+  "description": "Use antd design token like using tailwindcss",
+  "keywords": [
+    "antd",
+    "tailwindcss"
+  ],
+  "homepage": "https://json-q.github.io/tailwind-preset-antd/",
+  "license": "MIT",
+  "author": "json-q",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./components": "./dist/components.js",
+    "./plugin": "./dist/plugin.js",
+    "./preset": "./dist/preset.js",
+    "./package.json": "./package.json"
+  },
+  "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.2",
+    "@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.1.0",
+    "jsdom": "^29.1.1",
+    "oxfmt": "^0.48.0",
+    "oxlint": "^1.63.0",
+    "postcss": "^8.5.14",
+    "publint": "^0.3.19",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.2.4",
+    "tsdown": "^0.22.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.11",
+    "vitest": "^4.1.5"
+  },
+  "peerDependencies": {
+    "antd": ">=5",
+    "react": ">=16.9.0",
+    "tailwindcss": "^3 || ^4"
+  },
+  "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 run --coverage",
+    "release": "bumpp",
+    "lint:package": "publint",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check"
+  }
+}