tailwind-preset-antd 0.0.2 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.en-US.md +38 -39
  2. package/README.md +135 -136
  3. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/defineProperty.js +1 -1
  4. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/objectSpread2.js +1 -1
  5. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPrimitive.js +1 -1
  6. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPropertyKey.js +1 -1
  7. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/typeof.js +1 -1
  8. package/dist/components.js +7 -3
  9. package/dist/core/genCssVarByTokens.js +19 -2
  10. package/dist/hooks/useCompatibleInsertionEffect.js +25 -0
  11. package/dist/plugin.d.ts +2 -2
  12. package/dist/plugin.js +4 -8
  13. package/dist/preset/tokens/borderRadius.d.ts +3 -1
  14. package/dist/preset/tokens/colorPalettes.d.ts +6 -2
  15. package/dist/preset/tokens/colorPalettes.js +6 -2
  16. package/dist/preset/tokens/fontSizes.d.ts +3 -1
  17. package/dist/preset/tokens/functionalColors.d.ts +3 -1
  18. package/dist/preset/tokens/margins.d.ts +3 -1
  19. package/dist/preset/tokens/semanticColors.d.ts +3 -1
  20. package/dist/preset.d.ts +1 -1
  21. package/dist/utils/type.d.ts +6 -0
  22. package/package.json +76 -70
package/README.en-US.md CHANGED
@@ -1,13 +1,10 @@
1
- A tailwindcss plugin based on antd Design Token.
1
+ Use antd design token like using tailwindcss.
2
2
 
3
- English | [简体中文](./README.zh-CN.md)
3
+ Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
4
4
 
5
- # Project Introduction
6
-
7
- Version requirements:
5
+ [简体中文](./README.md) | English
8
6
 
9
- - antd >= 5
10
- - tailwindcss >= 3
7
+ # Project Introduction
11
8
 
12
9
  Before:
13
10
 
@@ -31,28 +28,25 @@ function App() {
31
28
 
32
29
  ## Basic Usage
33
30
 
34
- ### tailwindcss v3
31
+ ### tailwindcss v4
35
32
 
36
- 1. Register tailwind plugin
33
+ Use plugin in your css
37
34
 
38
- ```js
39
- // tailwind.config.ts
40
- import type { Config } from "tailwindcss/types/config";
41
- import antdThemePreset from "tailwind-preset-antd/plugin";
42
-
43
- const config: Config = {
44
- // ...
45
- // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
46
- plugins: [antdThemePreset],
47
- };
35
+ ```css
36
+ @plugin "tailwind-preset-antd/plugin";
48
37
 
49
- export default config;
38
+ /* or
39
+ @plugin "tailwind-preset-antd/plugin" {
40
+ twPrefix: "ant";
41
+ cssVarPrefix: "abcd";
42
+ }
43
+ */
50
44
  ```
51
45
 
52
- 2. Register global css variables based on antd token
46
+ Inject css variables component in any component
53
47
 
54
- ```jsx
55
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
48
+ ```tsx
49
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
56
50
 
57
51
  export default function App() {
58
52
  return (
@@ -63,25 +57,28 @@ export default function App() {
63
57
  }
64
58
  ```
65
59
 
66
- 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
60
+ ### tailwindcss v3
67
61
 
68
- ### tailwindcss v4
62
+ Use plugin in your `tailwind.config.ts`
69
63
 
70
- See [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
64
+ ```ts
65
+ // tailwind.config.ts
66
+ import type { Config } from "tailwindcss/types/config";
67
+ import tailwindPresetAntd from "tailwind-preset-antd/plugin";
71
68
 
72
- ```css
73
- @plugin "tailwind-preset-antd/plugin";
69
+ const config: Config = {
70
+ // ...
71
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
+ plugins: [tailwindPresetAntd],
73
+ };
74
74
 
75
- /* or
76
- @plugin "tailwind-preset-antd/plugin" {
77
- twPrefix: "ant";
78
- cssVarPrefix: "abcd";
79
- }
80
- */
75
+ export default config;
81
76
  ```
82
77
 
83
- ```jsx
84
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
78
+ Inject css variables component in any component
79
+
80
+ ```tsx
81
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
85
82
 
86
83
  export default function App() {
87
84
  return (
@@ -92,14 +89,16 @@ export default function App() {
92
89
  }
93
90
  ```
94
91
 
92
+ If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
93
+
95
94
  ## Configuration Options
96
95
 
97
96
  - `twPrefix`: tw class name prefix, default is `''`
98
- - `cssVarPrefix`: Generated css var variable prefix, default is `'a'`
97
+ - `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
99
98
 
100
99
  For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
101
100
 
102
- ```jsx
101
+ ```tsx
103
102
  /**
104
103
  * :root{
105
104
  * --abcd-colorPrimary: 47 84 235;
@@ -109,7 +108,7 @@ function App() {
109
108
  return <div className="bg-ant-colorPrimary"></div>;
110
109
  }
111
110
 
112
- // Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
111
+ // Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
113
112
  ```
114
113
 
115
114
  ### Using with tailwind-merge
package/README.md CHANGED
@@ -1,136 +1,135 @@
1
- 基于 Antd Design Token 的 tailwindcss 插件。
2
-
3
- [English](./README.md) | 简体中文
4
-
5
- # 项目介绍
6
-
7
- 版本要求：
8
-
9
- - antd >= 5
10
- - tailwindcss >= 3
11
-
12
- 以前：
13
-
14
- ```tsx
15
- import { theme } from "antd";
16
-
17
- function App() {
18
- const { cssVar } = theme.useToken(); // antd v6
19
-
20
- return <div style={{ backgroundColor: cssVar.colorPrimary }}></div>;
21
- }
22
- ```
23
-
24
- 现在：
25
-
26
- ```tsx
27
- function App() {
28
- return <div className="bg-colorPrimary"></div>;
29
- }
30
- ```
31
-
32
- ## 基础使用
33
-
34
- ### tailwindcss v3
35
-
36
- 1. 注册 tailwind 插件
37
-
38
- ```js
39
- // tailwind.config.ts
40
- import type { Config } from "tailwindcss/types/config";
41
- import antdThemePreset from "tailwind-preset-antd/plugin";
42
-
43
- const config: Config = {
44
- // ...
45
- // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
46
- plugins: [antdThemePreset],
47
- };
48
-
49
- export default config;
50
- ```
51
-
52
- 2. 注册基于 antd token 的全局 css 变量
53
-
54
- ```jsx
55
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
56
-
57
- export default function App() {
58
- return (
59
- <>
60
- <AntdTokenCssVar />
61
- </>
62
- );
63
- }
64
- ```
65
-
66
- 如果使用了 `tailwind-merge` 插件，则需要将 `fontSizes` 添加至其配置中，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
67
-
68
- ### tailwindcss v4
69
-
70
- 查看 [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
71
-
72
- ```css
73
- @plugin "tailwind-preset-antd/plugin";
74
-
75
- /* or
76
- @plugin "tailwind-preset-antd/plugin" {
77
- twPrefix: "ant";
78
- cssVarPrefix: "abcd";
79
- }
80
- */
81
- ```
82
-
83
- ```jsx
84
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
85
-
86
- export default function App() {
87
- return (
88
- <>
89
- <AntdTokenCssVar />
90
- </>
91
- );
92
- }
93
- ```
94
-
95
- ## 配置项
96
-
97
- - `twPrefix`: tw 类名前缀，默认为 `''`
98
- - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`
99
-
100
- 例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
101
-
102
- ```jsx
103
- /**
104
- * :root{
105
- * --abcd-colorPrimary: 47 84 235;
106
- * }
107
- */
108
- function App() {
109
- return <div className="bg-ant-colorPrimary"></div>;
110
- }
111
-
112
- // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
113
- ```
114
-
115
- ### 与 tailwind-merge 配合使用
116
-
117
- 如果使用 `tailwind-merge`，需进行额外配置，此问题详见 [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260)
118
-
119
- ```js
120
- import { extendTailwindMerge } from "tailwind-merge";
121
- import { fontSizes } from "tailwind-preset-antd/preset";
122
-
123
- const twMerge = extendTailwindMerge({
124
- // prefix:"" // 如果配置了 twPrefix
125
- extend: {
126
- theme: {
127
- text: [...fontSizes], // tw-merge v3
128
- // colors:[...colorPresets] // tw-merge v2
129
- },
130
- },
131
- });
132
- ```
133
-
134
- ## 鸣谢
135
-
136
- - [react-antd-admin](https://github.com/condorheroblog/react-antd-admin)：此项目的 tailwindcss 插件使用启发了此仓库的开发
1
+ 像使用 tailwindcss 一样使用 antd design token。
2
+
3
+ 提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
4
+
5
+ [English](./README.en-US.md) | 简体中文
6
+
7
+ # 项目介绍
8
+
9
+ 以前：
10
+
11
+ ```tsx
12
+ import { theme } from "antd";
13
+
14
+ function App() {
15
+ const { token } = theme.useToken();
16
+
17
+ return <div style={{ backgroundColor: token.colorPrimary }}></div>;
18
+ }
19
+ ```
20
+
21
+ 现在：
22
+
23
+ ```tsx
24
+ function App() {
25
+ return <div className="bg-colorPrimary"></div>;
26
+ }
27
+ ```
28
+
29
+ ## 基础使用
30
+
31
+ ### tailwindcss v4
32
+
33
+ 在你的 css 中使用插件
34
+
35
+ ```css
36
+ @plugin "tailwind-preset-antd/plugin";
37
+
38
+ /* or
39
+ @plugin "tailwind-preset-antd/plugin" {
40
+ twPrefix: "ant";
41
+ cssVarPrefix: "abcd";
42
+ }
43
+ */
44
+ ```
45
+
46
+ 在你的任意组件中注入 css 变量的组件
47
+
48
+ ```tsx
49
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
50
+
51
+ export default function App() {
52
+ return (
53
+ <>
54
+ <AntdTokenCssVar />
55
+ </>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### tailwindcss v3
61
+
62
+ 在你的 `tailwind.config.ts` 中使用插件
63
+
64
+ ```js
65
+ // tailwind.config.ts
66
+ import type { Config } from "tailwindcss/types/config";
67
+ import tailwindPresetAntd from "tailwind-preset-antd/plugin";
68
+
69
+ const config: Config = {
70
+ // ...
71
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
+ plugins: [tailwindPresetAntd],
73
+ };
74
+
75
+ export default config;
76
+ ```
77
+
78
+ 在你的任意组件中注入 css 变量的组件
79
+
80
+ ```tsx
81
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
82
+
83
+ export default function App() {
84
+ return (
85
+ <>
86
+ <AntdTokenCssVar />
87
+ </>
88
+ );
89
+ }
90
+ ```
91
+
92
+ 如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
93
+
94
+ ## 配置项
95
+
96
+ - `twPrefix`: tw 类名前缀，默认为 `''`
97
+ - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
98
+
99
+ 例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
100
+
101
+ ```tsx
102
+ /**
103
+ * :root{
104
+ * --abcd-colorPrimary: 47 84 235;
105
+ * }
106
+ */
107
+ function App() {
108
+ return <div className="bg-ant-colorPrimary"></div>;
109
+ }
110
+
111
+ // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
112
+ ```
113
+
114
+ ### 与 tailwind-merge 配合使用
115
+
116
+ 如果使用 `tailwind-merge`，需进行额外配置，此问题详见 [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260)
117
+
118
+ ```js
119
+ import { extendTailwindMerge } from "tailwind-merge";
120
+ import { fontSizes } from "tailwind-preset-antd/preset";
121
+
122
+ const twMerge = extendTailwindMerge({
123
+ // prefix:"" // 如果配置了 twPrefix
124
+ extend: {
125
+ theme: {
126
+ text: [...fontSizes], // tw-merge v3
127
+ // colors:[...colorPresets] // tw-merge v2
128
+ },
129
+ },
130
+ });
131
+ ```
132
+
133
+ ## 鸣谢
134
+
135
+ - [react-antd-admin](https://github.com/condorheroblog/react-antd-admin)：此项目的 tailwindcss 插件使用启发了此仓库的开发
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/defineProperty.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { toPropertyKey } from "./toPropertyKey.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
3
3
  function _defineProperty(e, r, t) {
4
4
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
5
5
  value: t,
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/objectSpread2.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { _defineProperty } from "./defineProperty.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/objectSpread2.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/objectSpread2.js
3
3
  function ownKeys(e, r) {
4
4
  var t = Object.keys(e);
5
5
  if (Object.getOwnPropertySymbols) {
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPrimitive.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { _typeof } from "./typeof.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
3
3
  function toPrimitive(t, r) {
4
4
  if ("object" != _typeof(t) || !t) return t;
5
5
  var e = t[Symbol.toPrimitive];
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPropertyKey.js RENAMED
@@ -1,6 +1,6 @@
1
1
  import { _typeof } from "./typeof.js";
2
2
  import { toPrimitive } from "./toPrimitive.js";
3
- //#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
3
+ //#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
4
4
  function toPropertyKey(t) {
5
5
  var i = toPrimitive(t, "string");
6
6
  return "symbol" == _typeof(i) ? i : i + "";
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/typeof.js RENAMED
@@ -1,4 +1,4 @@
1
- //#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
1
+ //#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
2
2
  function _typeof(o) {
3
3
  "@babel/helpers - typeof";
4
4
  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
package/dist/components.js CHANGED
@@ -1,13 +1,17 @@
1
1
  import { genCSSVarByTokens } from "./core/genCssVarByTokens.js";
2
+ import useCompatibleInsertionEffect from "./hooks/useCompatibleInsertionEffect.js";
2
3
  import { theme } from "antd";
3
- import { useInsertionEffect } from "react";
4
+ import { useRef } from "react";
4
5
  //#region src/components.tsx
5
6
  const styleId = "antd-token-inject";
6
7
  function AntdTokenCssVar(props) {
7
8
  const { cssVarPrefix } = props;
8
9
  const { token } = theme.useToken();
9
- useInsertionEffect(() => {
10
- const cssVar = genCSSVarByTokens(token, cssVarPrefix);
10
+ const cssVarRef = useRef("");
11
+ useCompatibleInsertionEffect(() => {
12
+ cssVarRef.current = genCSSVarByTokens(token, cssVarPrefix);
13
+ }, () => {
14
+ const cssVar = cssVarRef.current;
11
15
  const style = document.querySelector(`#${styleId}`) || document.createElement("style");
12
16
  style.id = styleId;
13
17
  style.setAttribute("plugin-name", "tailwind-preset-antd");
package/dist/core/genCssVarByTokens.js CHANGED
@@ -8,8 +8,25 @@ import { borderRadius } from "../preset/tokens/borderRadius.js";
8
8
  //#region src/core/genCssVarByTokens.ts
9
9
  function genCSSVarByTokens(tokens, cssVarPrefix = "a") {
10
10
  let colorsVariables = "";
11
- for (const [key, value] of Object.entries(tokens)) {
12
- if (colorPalettes.includes(key)) colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
11
+ const presetTokens = [
12
+ ...colorPalettes,
13
+ ...functionalColors,
14
+ ...semanticColors,
15
+ ...margins,
16
+ ...borderRadius,
17
+ ...fontSizes
18
+ ];
19
+ for (let i = 0; i < presetTokens.length; i++) {
20
+ const key = presetTokens[i];
21
+ const value = tokens[key];
22
+ if (value === void 0) {
23
+ if (process.env.NODE_ENV === "development") console.warn(`[tailwind-preset-antd]: ${key} is not defined in antd design token`);
24
+ continue;
25
+ }
26
+ if (colorPalettes.includes(key)) {
27
+ colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
28
+ continue;
29
+ }
13
30
  if (functionalColors.includes(key)) {
14
31
  const rgb = hexToRgb(value);
15
32
  colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
package/dist/hooks/useCompatibleInsertionEffect.js ADDED
@@ -0,0 +1,25 @@
1
+ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
2
+ import * as React from "react";
3
+ //#region src/hooks/useCompatibleInsertionEffect.ts
4
+ const { useInsertionEffect } = _objectSpread2({}, React);
5
+ /**
6
+ * Polyfill `useInsertionEffect` for React < 18
7
+ * @param renderEffect will be executed in `useMemo`, and do not have callback
8
+ * @param effect will be executed in `useLayoutEffect`
9
+ * @param deps
10
+ */
11
+ const useInsertionEffectPolyfill = (renderEffect, effect, deps) => {
12
+ React.useMemo(renderEffect, deps);
13
+ React.useLayoutEffect(() => effect(true), deps);
14
+ };
15
+ /**
16
+ * Compatible `useInsertionEffect`
17
+ * will use `useInsertionEffect` if React version >= 18,
18
+ * otherwise use `useInsertionEffectPolyfill`.
19
+ */
20
+ const useCompatibleInsertionEffect = useInsertionEffect ? (renderEffect, effect, deps) => useInsertionEffect(() => {
21
+ renderEffect();
22
+ return effect();
23
+ }, deps) : useInsertionEffectPolyfill;
24
+ //#endregion
25
+ export { useCompatibleInsertionEffect as default };
package/dist/plugin.d.ts CHANGED
@@ -18,9 +18,9 @@ interface PluginWithOptions<T> {
18
18
  __isOptionsFunction: true;
19
19
  }
20
20
  /**
21
- * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
21
+ * @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
22
22
  * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
23
- * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
23
+ * @see https://ant.design/docs/react/customize-theme-cn#maptoken
24
24
  * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
25
25
  */
26
26
  declare const twAntdPresetPlugin: PluginWithOptions<PluginOptions>;
package/dist/plugin.js CHANGED
@@ -1,20 +1,16 @@
1
+ import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
1
2
  import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
2
- import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.127.0/helpers/objectSpread2.js";
3
3
  import plugin from "tailwindcss/plugin";
4
4
  //#region src/plugin.ts
5
5
  /**
6
- * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
6
+ * @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
7
7
  * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
8
- * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
8
+ * @see https://ant.design/docs/react/customize-theme-cn#maptoken
9
9
  * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
10
10
  */
11
11
  const twAntdPresetPlugin = plugin.withOptions(() => () => {}, (options = {}) => {
12
12
  const { cssVarPrefix = "a", twPrefix = "" } = options;
13
- return { theme: {
14
- /**
15
- * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
16
- */
17
- extend: {
13
+ return { theme: { extend: {
18
14
  colors: _objectSpread2(_objectSpread2({}, createColorPalettes(cssVarPrefix, twPrefix)), {}, {
19
15
  white: "rgb(255 255 255)",
20
16
  black: "rgb(0 0 0)",
package/dist/preset/tokens/borderRadius.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/borderRadius.d.ts
2
- declare const borderRadius: string[];
4
+ declare const borderRadius: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { borderRadius };
package/dist/preset/tokens/colorPalettes.d.ts CHANGED
@@ -1,7 +1,11 @@
1
+ import { PresetColorKey } from "antd/es/theme/internal.js";
2
+ import { ColorPalettes, LegacyColorPalettes } from "antd/es/theme/interface/index.js";
3
+
1
4
  //#region src/preset/tokens/colorPalettes.d.ts
5
+ type PresetColorPalettes = ColorPalettes & PresetColorKey & LegacyColorPalettes;
2
6
  /**
3
- * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
7
+ * `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
4
8
  */
5
- declare const colorPalettes: string[];
9
+ declare const colorPalettes: PresetColorPalettes[];
6
10
  //#endregion
7
11
  export { colorPalettes };
package/dist/preset/tokens/colorPalettes.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
2
+ * `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
3
3
  */
4
4
  const colorPalettes = [
5
5
  "red",
@@ -14,6 +14,10 @@ const colorPalettes = [
14
14
  "geekblue",
15
15
  "purple",
16
16
  "magenta"
17
- ].flatMap((color) => [color, ...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)]);
17
+ ].flatMap((color) => [
18
+ color,
19
+ ...Array.from({ length: 10 }, (_, i) => `${color}${i + 1}`),
20
+ ...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)
21
+ ]);
18
22
  //#endregion
19
23
  export { colorPalettes };
package/dist/preset/tokens/fontSizes.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/fontSizes.d.ts
2
- declare const fontSizes: string[];
4
+ declare const fontSizes: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { fontSizes };
package/dist/preset/tokens/functionalColors.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/functionalColors.d.ts
2
- declare const functionalColors: string[];
4
+ declare const functionalColors: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { functionalColors };
package/dist/preset/tokens/margins.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/margins.d.ts
2
- declare const margins: string[];
4
+ declare const margins: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { margins };
package/dist/preset/tokens/semanticColors.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/semanticColors.d.ts
2
- declare const semanticColors: string[];
4
+ declare const semanticColors: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { semanticColors };
package/dist/preset.d.ts CHANGED
@@ -6,6 +6,6 @@ import { fontSizes } from "./preset/tokens/fontSizes.js";
6
6
  import { borderRadius } from "./preset/tokens/borderRadius.js";
7
7
 
8
8
  //#region src/preset/index.d.ts
9
- declare const colorPresets: string[];
9
+ declare const colorPresets: ("blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | "blue1" | "blue2" | "blue3" | "blue4" | "blue5" | "blue6" | "blue7" | "blue8" | "blue9" | "blue10" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "cyan1" | "cyan2" | "cyan3" | "cyan4" | "cyan5" | "cyan6" | "cyan7" | "cyan8" | "cyan9" | "cyan10" | "green1" | "green2" | "green3" | "green4" | "green5" | "green6" | "green7" | "green8" | "green9" | "green10" | "magenta1" | "magenta2" | "magenta3" | "magenta4" | "magenta5" | "magenta6" | "magenta7" | "magenta8" | "magenta9" | "magenta10" | "pink1" | "pink2" | "pink3" | "pink4" | "pink5" | "pink6" | "pink7" | "pink8" | "pink9" | "pink10" | "red1" | "red2" | "red3" | "red4" | "red5" | "red6" | "red7" | "red8" | "red9" | "red10" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "yellow1" | "yellow2" | "yellow3" | "yellow4" | "yellow5" | "yellow6" | "yellow7" | "yellow8" | "yellow9" | "yellow10" | "volcano1" | "volcano2" | "volcano3" | "volcano4" | "volcano5" | "volcano6" | "volcano7" | "volcano8" | "volcano9" | "volcano10" | "geekblue1" | "geekblue2" | "geekblue3" | "geekblue4" | "geekblue5" | "geekblue6" | "geekblue7" | "geekblue8" | "geekblue9" | "geekblue10" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "gold1" | "gold2" | "gold3" | "gold4" | "gold5" | "gold6" | "gold7" | "gold8" | "gold9" | "gold10" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "volcano-1" | "volcano-2" | "volcano-3" | "volcano-4" | "volcano-5" | "volcano-6" | "volcano-7" | "volcano-8" | "volcano-9" | "volcano-10" | "geekblue-1" | "geekblue-2" | "geekblue-3" | "geekblue-4" | "geekblue-5" | "geekblue-6" | "geekblue-7" | "geekblue-8" | "geekblue-9" | "geekblue-10" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "gold-1" | "gold-2" | "gold-3" | "gold-4" | "gold-5" | "gold-6" | "gold-7" | "gold-8" | "gold-9" | "gold-10" | "colorFillContentHover" | "colorFillAlter" | "colorFillContent" | "colorBgContainerDisabled" | "colorBgTextHover" | "colorBgTextActive" | "colorBorderBg" | "colorSplit" | "colorTextPlaceholder" | "colorTextDisabled" | "colorTextHeading" | "colorTextLabel" | "colorTextDescription" | "colorTextLightSolid" | "colorIcon" | "colorIconHover" | "colorHighlight" | "controlOutline" | "colorWarningOutline" | "colorErrorOutline" | "fontSizeIcon" | "fontWeightStrong" | "controlOutlineWidth" | "controlItemBgHover" | "controlItemBgActive" | "controlItemBgActiveHover" | "controlInteractiveSize" | "controlItemBgActiveDisabled" | "lineWidthFocus" | "paddingXXS" | "paddingXS" | "paddingSM" | "padding" | "paddingMD" | "paddingLG" | "paddingXL" | "paddingContentHorizontalLG" | "paddingContentHorizontal" | "paddingContentHorizontalSM" | "paddingContentVerticalLG" | "paddingContentVertical" | "paddingContentVerticalSM" | "marginXXS" | "marginXS" | "marginSM" | "margin" | "marginMD" | "marginLG" | "marginXL" | "marginXXL" | "opacityLoading" | "boxShadow" | "boxShadowSecondary" | "boxShadowTertiary" | "linkDecoration" | "linkHoverDecoration" | "linkFocusDecoration" | "controlPaddingHorizontal" | "controlPaddingHorizontalSM" | "screenXS" | "screenXSMin" | "screenXSMax" | "screenSM" | "screenSMMin" | "screenSMMax" | "screenMD" | "screenMDMin" | "screenMDMax" | "screenLG" | "screenLGMin" | "screenLGMax" | "screenXL" | "screenXLMin" | "screenXLMax" | "screenXXL" | "screenXXLMin" | "screenXXLMax" | "screenXXXL" | "screenXXXLMin" | "controlTmpOutline" | "colorPrimary" | "colorSuccess" | "colorWarning" | "colorError" | "colorInfo" | "colorTextBase" | "colorBgBase" | "colorLink" | "fontFamily" | "fontFamilyCode" | "fontSize" | "lineWidth" | "lineType" | "borderRadius" | "sizeUnit" | "sizeStep" | "sizePopupArrow" | "controlHeight" | "zIndexBase" | "zIndexPopupBase" | "opacityImage" | "motionUnit" | "motionBase" | "motionEaseOutCirc" | "motionEaseInOutCirc" | "motionEaseInOut" | "motionEaseOutBack" | "motionEaseInBack" | "motionEaseInQuint" | "motionEaseOutQuint" | "motionEaseOut" | "wireframe" | "motion" | "colorWhite" | "colorBgMask" | "colorText" | "colorTextSecondary" | "colorTextTertiary" | "colorTextQuaternary" | "colorBorder" | "colorBorderSecondary" | "colorBorderDisabled" | "colorFill" | "colorFillSecondary" | "colorFillTertiary" | "colorFillQuaternary" | "colorBgLayout" | "colorBgContainer" | "colorBgElevated" | "colorBgSpotlight" | "colorBgBlur" | "colorBgSolid" | "colorBgSolidActive" | "colorBgSolidHover" | "colorPrimaryBg" | "colorPrimaryBgHover" | "colorPrimaryBorder" | "colorPrimaryBorderHover" | "colorPrimaryHover" | "colorPrimaryActive" | "colorPrimaryTextHover" | "colorPrimaryText" | "colorPrimaryTextActive" | "colorSuccessBg" | "colorSuccessBgHover" | "colorSuccessBorder" | "colorSuccessBorderHover" | "colorSuccessHover" | "colorSuccessActive" | "colorSuccessTextHover" | "colorSuccessText" | "colorSuccessTextActive" | "colorWarningBg" | "colorWarningBgHover" | "colorWarningBorder" | "colorWarningBorderHover" | "colorWarningHover" | "colorWarningActive" | "colorWarningTextHover" | "colorWarningText" | "colorWarningTextActive" | "colorErrorBg" | "colorErrorBgHover" | "colorErrorBgFilledHover" | "colorErrorBgActive" | "colorErrorBorder" | "colorErrorBorderHover" | "colorErrorHover" | "colorErrorActive" | "colorErrorTextHover" | "colorErrorText" | "colorErrorTextActive" | "colorInfoBg" | "colorInfoBgHover" | "colorInfoBorder" | "colorInfoBorderHover" | "colorInfoHover" | "colorInfoActive" | "colorInfoTextHover" | "colorInfoText" | "colorInfoTextActive" | "colorLinkHover" | "colorLinkActive" | "sizeXXL" | "sizeXL" | "sizeLG" | "sizeMD" | "sizeMS" | "size" | "sizeSM" | "sizeXS" | "sizeXXS" | "controlHeightXS" | "controlHeightSM" | "controlHeightLG" | "lineWidthBold" | "borderRadiusXS" | "borderRadiusSM" | "borderRadiusLG" | "borderRadiusOuter" | "fontSizeSM" | "fontSizeLG" | "fontSizeXL" | "fontSizeHeading1" | "fontSizeHeading2" | "fontSizeHeading3" | "fontSizeHeading4" | "fontSizeHeading5" | "lineHeight" | "lineHeightLG" | "lineHeightSM" | "lineHeightHeading1" | "lineHeightHeading2" | "lineHeightHeading3" | "lineHeightHeading4" | "lineHeightHeading5" | "motionDurationFast" | "motionDurationMid" | "motionDurationSlow")[];
10
10
  //#endregion
11
11
  export { borderRadius, colorPalettes, colorPresets, fontSizes, functionalColors, margins, semanticColors };
package/dist/utils/type.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { AliasToken } from "antd/es/theme/internal.js";
2
+
3
+ //#region src/utils/type.d.ts
4
+ type AliasTokenKey = keyof AliasToken;
5
+ //#endregion
6
+ export { AliasTokenKey };
package/package.json CHANGED
@@ -1,70 +1,76 @@
1
- {
2
- "name": "tailwind-preset-antd",
3
- "version": "0.0.2",
4
- "description": "Use Tailwind CSS with Ant Design tokens",
5
- "homepage": "https://github.com/json-q/tailwind-preset-antd",
6
- "license": "MIT",
7
- "author": "json-q",
8
- "repository": {
9
- "type": "git",
10
- "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
11
- },
12
- "files": [
13
- "dist"
14
- ],
15
- "type": "module",
16
- "sideEffects": false,
17
- "exports": {
18
- "./components": "./dist/components.js",
19
- "./plugin": "./dist/plugin.js",
20
- "./preset": "./dist/preset.js",
21
- "./package.json": "./package.json"
22
- },
23
- "scripts": {
24
- "play": "vite",
25
- "build:play": "vite build",
26
- "preview:play": "vite preview",
27
- "build": "tsdown",
28
- "dev": "tsdown --watch",
29
- "test": "vitest",
30
- "ui": "vitest --ui",
31
- "snapshot": "vitest -u",
32
- "coverage": "vitest --coverage",
33
- "release": "bumpp",
34
- "prepublishOnly": "pnpm run build",
35
- "typecheck": "tsc --noEmit",
36
- "lint": "oxlint",
37
- "lint:fix": "oxlint --fix",
38
- "fmt": "oxfmt",
39
- "fmt:check": "oxfmt --check"
40
- },
41
- "dependencies": {
42
- "hex-rgb": "^5.0.0"
43
- },
44
- "devDependencies": {
45
- "@tailwindcss/vite": "^4.2.4",
46
- "@testing-library/jest-dom": "^6.9.1",
47
- "@testing-library/react": "^16.3.2",
48
- "@types/node": "^25.6.0",
49
- "@types/react": "^19.2.14",
50
- "@types/react-dom": "^19.2.3",
51
- "@vitejs/plugin-react": "^6.0.1",
52
- "@vitest/coverage-v8": "4.1.5",
53
- "bumpp": "^11.0.1",
54
- "jsdom": "^29.1.1",
55
- "oxfmt": "^0.48.0",
56
- "oxlint": "^1.63.0",
57
- "postcss": "^8.5.14",
58
- "react-dom": "^19.2.6",
59
- "tailwindcss": "^4.2.4",
60
- "tsdown": "^0.21.10",
61
- "typescript": "^6.0.3",
62
- "vite": "^8.0.10",
63
- "vitest": "^4.1.5"
64
- },
65
- "peerDependencies": {
66
- "antd": ">=5",
67
- "react": ">=18",
68
- "tailwindcss": "^3 || ^4"
69
- }
70
- }
1
+ {
2
+ "name": "tailwind-preset-antd",
3
+ "version": "0.1.1",
4
+ "description": "Use antd design token like using tailwindcss",
5
+ "keywords": [
6
+ "antd",
7
+ "tailwindcss"
8
+ ],
9
+ "homepage": "https://json-q.github.io/tailwind-preset-antd/",
10
+ "license": "MIT",
11
+ "author": "json-q",
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
15
+ },
16
+ "files": [
17
+ "dist"
18
+ ],
19
+ "type": "module",
20
+ "sideEffects": false,
21
+ "exports": {
22
+ "./components": "./dist/components.js",
23
+ "./plugin": "./dist/plugin.js",
24
+ "./preset": "./dist/preset.js",
25
+ "./package.json": "./package.json"
26
+ },
27
+ "scripts": {
28
+ "play": "vite",
29
+ "build:play": "vite build",
30
+ "preview:play": "vite preview",
31
+ "build": "tsdown",
32
+ "dev": "tsdown --watch",
33
+ "test": "vitest",
34
+ "ui": "vitest --ui",
35
+ "snapshot": "vitest -u",
36
+ "coverage": "vitest run --coverage",
37
+ "release": "bumpp",
38
+ "prepublishOnly": "pnpm run build",
39
+ "lint:package": "publint",
40
+ "typecheck": "tsc --noEmit",
41
+ "lint": "oxlint",
42
+ "lint:fix": "oxlint --fix",
43
+ "fmt": "oxfmt",
44
+ "fmt:check": "oxfmt --check"
45
+ },
46
+ "dependencies": {
47
+ "hex-rgb": "^5.0.0"
48
+ },
49
+ "devDependencies": {
50
+ "@tailwindcss/vite": "^4.2.4",
51
+ "@testing-library/jest-dom": "^6.9.1",
52
+ "@testing-library/react": "^16.3.2",
53
+ "@types/node": "^25.6.2",
54
+ "@types/react": "^19.2.14",
55
+ "@types/react-dom": "^19.2.3",
56
+ "@vitejs/plugin-react": "^6.0.1",
57
+ "@vitest/coverage-v8": "4.1.5",
58
+ "bumpp": "^11.1.0",
59
+ "jsdom": "^29.1.1",
60
+ "oxfmt": "^0.48.0",
61
+ "oxlint": "^1.63.0",
62
+ "postcss": "^8.5.14",
63
+ "publint": "^0.3.19",
64
+ "react-dom": "^19.2.6",
65
+ "tailwindcss": "^4.2.4",
66
+ "tsdown": "^0.22.0",
67
+ "typescript": "^6.0.3",
68
+ "vite": "^8.0.11",
69
+ "vitest": "^4.1.5"
70
+ },
71
+ "peerDependencies": {
72
+ "antd": ">=5",
73
+ "react": ">=16.9.0",
74
+ "tailwindcss": "^3 || ^4"
75
+ }
76
+ }