@dt-frames/tailwind-config 4.0.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 (10) hide show
  1. package/build.config.ts +11 -0
  2. package/dist/index.cjs +267 -0
  3. package/dist/index.mjs +258 -0
  4. package/dist/postcss.config.cjs +23 -0
  5. package/dist/postcss.config.mjs +21 -0
  6. package/package.json +48 -0
  7. package/src/index.ts +218 -0
  8. package/src/plugins/entry.ts +54 -0
  9. package/src/postcss.config.ts +13 -0
  10. package/tsconfig.json +9 -0
package/build.config.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { defineBuildConfig } from 'unbuild'
2
+
3
+ export default defineBuildConfig({
4
+ clean: true,
5
+ declaration: false,
6
+ failOnWarn: false,
7
+ entries: ['./src/index', './src/postcss.config'],
8
+ rollup: {
9
+ emitCJS: true,
10
+ }
11
+ })
package/dist/index.cjs ADDED
@@ -0,0 +1,267 @@
1
+ 'use strict';
2
+
3
+ const path = require('node:path');
4
+ const tailwind = require('@iconify/tailwind');
5
+ const getPackages = require('@manypkg/get-packages');
6
+ const typographyPlugin = require('@tailwindcss/typography');
7
+ const animate = require('tailwindcss-animate');
8
+ const plugin = require('tailwindcss/plugin.js');
9
+
10
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
11
+
12
+ const path__default = /*#__PURE__*/_interopDefaultCompat(path);
13
+ const typographyPlugin__default = /*#__PURE__*/_interopDefaultCompat(typographyPlugin);
14
+ const animate__default = /*#__PURE__*/_interopDefaultCompat(animate);
15
+ const plugin__default = /*#__PURE__*/_interopDefaultCompat(plugin);
16
+
17
+ const enterAnimationPlugin = plugin__default(({ addUtilities }) => {
18
+ const maxChild = 5;
19
+ const utilities = {};
20
+ for (let i = 1; i <= maxChild; i++) {
21
+ const baseDelay = 0.1;
22
+ const delay = `${baseDelay * i}s`;
23
+ utilities[`.enter-x:nth-child(${i})`] = {
24
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
25
+ opacity: "0",
26
+ transform: `translateX(50px)`
27
+ };
28
+ utilities[`.enter-y:nth-child(${i})`] = {
29
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
30
+ opacity: "0",
31
+ transform: `translateY(50px)`
32
+ };
33
+ utilities[`.-enter-x:nth-child(${i})`] = {
34
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
35
+ opacity: "0",
36
+ transform: `translateX(-50px)`
37
+ };
38
+ utilities[`.-enter-y:nth-child(${i})`] = {
39
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
40
+ opacity: "0",
41
+ transform: `translateY(-50px)`
42
+ };
43
+ }
44
+ addUtilities(utilities);
45
+ addUtilities({
46
+ "@keyframes enter-x-animation": {
47
+ to: {
48
+ opacity: "1",
49
+ transform: "translateX(0)"
50
+ }
51
+ },
52
+ "@keyframes enter-y-animation": {
53
+ to: {
54
+ opacity: "1",
55
+ transform: "translateY(0)"
56
+ }
57
+ }
58
+ });
59
+ });
60
+
61
+ const { packages } = getPackages.getPackagesSync(process.cwd());
62
+ const tailwindPackages = [];
63
+ packages.forEach((pkg) => {
64
+ tailwindPackages.push(pkg.dir);
65
+ });
66
+ const shadcnUiColors = {
67
+ accent: {
68
+ DEFAULT: "hsl(var(--accent))",
69
+ foreground: "hsl(var(--accent-foreground))",
70
+ hover: "hsl(var(--accent-hover))",
71
+ lighter: "has(val(--accent-lighter))"
72
+ },
73
+ background: {
74
+ deep: "hsl(var(--background-deep))",
75
+ DEFAULT: "hsl(var(--background))"
76
+ },
77
+ border: {
78
+ DEFAULT: "hsl(var(--border))"
79
+ },
80
+ card: {
81
+ DEFAULT: "hsl(var(--card))",
82
+ foreground: "hsl(var(--card-foreground))"
83
+ },
84
+ destructive: {
85
+ ...createColorsPalette("destructive"),
86
+ DEFAULT: "hsl(var(--destructive))"
87
+ },
88
+ foreground: {
89
+ DEFAULT: "hsl(var(--foreground))"
90
+ },
91
+ input: {
92
+ background: "hsl(var(--input-background))",
93
+ DEFAULT: "hsl(var(--input))"
94
+ },
95
+ muted: {
96
+ DEFAULT: "hsl(var(--muted))",
97
+ foreground: "hsl(var(--muted-foreground))"
98
+ },
99
+ popover: {
100
+ DEFAULT: "hsl(var(--popover))",
101
+ foreground: "hsl(var(--popover-foreground))"
102
+ },
103
+ primary: {
104
+ ...createColorsPalette("primary"),
105
+ DEFAULT: "hsl(var(--primary))"
106
+ },
107
+ ring: "hsl(var(--ring))",
108
+ secondary: {
109
+ DEFAULT: "hsl(var(--secondary))",
110
+ desc: "hsl(var(--secondary-desc))",
111
+ foreground: "hsl(var(--secondary-foreground))"
112
+ }
113
+ };
114
+ const customColors = {
115
+ green: {
116
+ ...createColorsPalette("green"),
117
+ foreground: "hsl(var(--success-foreground))"
118
+ },
119
+ header: {
120
+ DEFAULT: "hsl(var(--header))"
121
+ },
122
+ heavy: {
123
+ DEFAULT: "hsl(var(--heavy))",
124
+ foreground: "hsl(var(--heavy-foreground))"
125
+ },
126
+ main: {
127
+ DEFAULT: "hsl(var(--main))"
128
+ },
129
+ overlay: {
130
+ content: "hsl(var(--overlay-content))",
131
+ DEFAULT: "hsl(var(--overlay))"
132
+ },
133
+ red: {
134
+ ...createColorsPalette("red"),
135
+ foreground: "hsl(var(--destructive-foreground))"
136
+ },
137
+ sidebar: {
138
+ deep: "hsl(var(--sidebar-deep))",
139
+ DEFAULT: "hsl(var(--sidebar))"
140
+ },
141
+ success: {
142
+ ...createColorsPalette("success"),
143
+ DEFAULT: "hsl(var(--success))"
144
+ },
145
+ warning: {
146
+ ...createColorsPalette("warning"),
147
+ DEFAULT: "hsl(var(--warning))"
148
+ },
149
+ yellow: {
150
+ ...createColorsPalette("yellow"),
151
+ foreground: "hsl(var(--warning-foreground))"
152
+ }
153
+ };
154
+ const config = {
155
+ content: [
156
+ "./index.html",
157
+ ...tailwindPackages.map(
158
+ (item) => path__default.join(item, "src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}")
159
+ )
160
+ ],
161
+ darkMode: "selector",
162
+ plugins: [animate__default, typographyPlugin__default, tailwind.addDynamicIconSelectors(), enterAnimationPlugin],
163
+ prefix: "",
164
+ theme: {
165
+ container: {
166
+ center: true,
167
+ padding: "2rem",
168
+ screens: {
169
+ "2xl": "1400px"
170
+ }
171
+ },
172
+ extend: {
173
+ animation: {
174
+ "accordion-down": "accordion-down 0.2s ease-out",
175
+ "accordion-up": "accordion-up 0.2s ease-out",
176
+ "collapsible-down": "collapsible-down 0.2s ease-in-out",
177
+ "collapsible-up": "collapsible-up 0.2s ease-in-out",
178
+ float: "float 5s linear 0ms infinite"
179
+ }
180
+ },
181
+ animationDuration: {
182
+ "2000": "2000ms",
183
+ "3000": "3000ms"
184
+ },
185
+ borderRadius: {
186
+ lg: "var(--radius)",
187
+ md: "calc(var(--radius) - 2px)",
188
+ sm: "calc(var(--radius) - 4px)",
189
+ xl: "calc(var(--radius) + 4px)"
190
+ },
191
+ boxShadow: {
192
+ float: `0 6px 16px 0 rgb(0 0 0 / 8%),
193
+ 0 3px 6px -4px rgb(0 0 0 / 12%),
194
+ 0 9px 28px 8px rgb(0 0 0 / 5%)`
195
+ },
196
+ colors: {
197
+ ...customColors,
198
+ ...shadcnUiColors
199
+ },
200
+ fontFamily: {
201
+ sans: ["var(--font-family)"]
202
+ },
203
+ keyframes: {
204
+ "accordion-down": {
205
+ from: { height: "0" },
206
+ to: { height: "var(--radix-accordion-content-height)" }
207
+ },
208
+ "accordion-up": {
209
+ from: { height: "var(--radix-accordion-content-height)" },
210
+ to: { height: "0" }
211
+ },
212
+ "collapsible-down": {
213
+ from: { height: "0" },
214
+ to: { height: "var(--radix-collapsible-content-height)" }
215
+ },
216
+ "collapsible-up": {
217
+ from: { height: "var(--radix-collapsible-content-height)" },
218
+ to: { height: "0" }
219
+ },
220
+ float: {
221
+ "0%": { transform: "translateY(0)" },
222
+ "50%": { transform: "translateY(-20px)" },
223
+ "100%": { transform: "translateY(0)" }
224
+ }
225
+ },
226
+ zIndex: {
227
+ "100": "100",
228
+ "1000": "1000"
229
+ }
230
+ },
231
+ safelist: ["dark"]
232
+ };
233
+ function createColorsPalette(name) {
234
+ return {
235
+ 50: `hsl(var(--${name}-50))`,
236
+ 100: `hsl(var(--${name}-100))`,
237
+ 200: `hsl(var(--${name}-200))`,
238
+ 300: `hsl(var(--${name}-300))`,
239
+ 400: `hsl(var(--${name}-400))`,
240
+ 500: `hsl(var(--${name}-500))`,
241
+ 600: `hsl(var(--${name}-600))`,
242
+ 700: `hsl(var(--${name}-700))`,
243
+ // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
244
+ active: `hsl(var(--${name}-700))`,
245
+ // 浅色背景，适用于输入框或表单区域的背景。
246
+ "background-light": `hsl(var(--${name}-200))`,
247
+ // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
248
+ "background-lighter": `hsl(var(--${name}-100))`,
249
+ // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
250
+ "background-lightest": `hsl(var(--${name}-50))`,
251
+ // 适用于普通边框，可能用于按钮或卡片的边框。
252
+ border: `hsl(var(--${name}-400))`,
253
+ // 浅色边框，适用于输入框或卡片的边框。
254
+ "border-light": `hsl(var(--${name}-300))`,
255
+ foreground: `hsl(var(--${name}-foreground))`,
256
+ // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
257
+ hover: `hsl(var(--${name}-600))`,
258
+ // 主色文本
259
+ text: `hsl(var(--${name}-500))`,
260
+ // 主色文本激活态
261
+ "text-active": `hsl(var(--${name}-700))`,
262
+ // 主色文本悬浮态
263
+ "text-hover": `hsl(var(--${name}-600))`
264
+ };
265
+ }
266
+
267
+ module.exports = config;
package/dist/index.mjs ADDED
@@ -0,0 +1,258 @@
1
+ import path from 'node:path';
2
+ import { addDynamicIconSelectors } from '@iconify/tailwind';
3
+ import { getPackagesSync } from '@manypkg/get-packages';
4
+ import typographyPlugin from '@tailwindcss/typography';
5
+ import animate from 'tailwindcss-animate';
6
+ import plugin from 'tailwindcss/plugin.js';
7
+
8
+ const enterAnimationPlugin = plugin(({ addUtilities }) => {
9
+ const maxChild = 5;
10
+ const utilities = {};
11
+ for (let i = 1; i <= maxChild; i++) {
12
+ const baseDelay = 0.1;
13
+ const delay = `${baseDelay * i}s`;
14
+ utilities[`.enter-x:nth-child(${i})`] = {
15
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
16
+ opacity: "0",
17
+ transform: `translateX(50px)`
18
+ };
19
+ utilities[`.enter-y:nth-child(${i})`] = {
20
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
21
+ opacity: "0",
22
+ transform: `translateY(50px)`
23
+ };
24
+ utilities[`.-enter-x:nth-child(${i})`] = {
25
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
26
+ opacity: "0",
27
+ transform: `translateX(-50px)`
28
+ };
29
+ utilities[`.-enter-y:nth-child(${i})`] = {
30
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
31
+ opacity: "0",
32
+ transform: `translateY(-50px)`
33
+ };
34
+ }
35
+ addUtilities(utilities);
36
+ addUtilities({
37
+ "@keyframes enter-x-animation": {
38
+ to: {
39
+ opacity: "1",
40
+ transform: "translateX(0)"
41
+ }
42
+ },
43
+ "@keyframes enter-y-animation": {
44
+ to: {
45
+ opacity: "1",
46
+ transform: "translateY(0)"
47
+ }
48
+ }
49
+ });
50
+ });
51
+
52
+ const { packages } = getPackagesSync(process.cwd());
53
+ const tailwindPackages = [];
54
+ packages.forEach((pkg) => {
55
+ tailwindPackages.push(pkg.dir);
56
+ });
57
+ const shadcnUiColors = {
58
+ accent: {
59
+ DEFAULT: "hsl(var(--accent))",
60
+ foreground: "hsl(var(--accent-foreground))",
61
+ hover: "hsl(var(--accent-hover))",
62
+ lighter: "has(val(--accent-lighter))"
63
+ },
64
+ background: {
65
+ deep: "hsl(var(--background-deep))",
66
+ DEFAULT: "hsl(var(--background))"
67
+ },
68
+ border: {
69
+ DEFAULT: "hsl(var(--border))"
70
+ },
71
+ card: {
72
+ DEFAULT: "hsl(var(--card))",
73
+ foreground: "hsl(var(--card-foreground))"
74
+ },
75
+ destructive: {
76
+ ...createColorsPalette("destructive"),
77
+ DEFAULT: "hsl(var(--destructive))"
78
+ },
79
+ foreground: {
80
+ DEFAULT: "hsl(var(--foreground))"
81
+ },
82
+ input: {
83
+ background: "hsl(var(--input-background))",
84
+ DEFAULT: "hsl(var(--input))"
85
+ },
86
+ muted: {
87
+ DEFAULT: "hsl(var(--muted))",
88
+ foreground: "hsl(var(--muted-foreground))"
89
+ },
90
+ popover: {
91
+ DEFAULT: "hsl(var(--popover))",
92
+ foreground: "hsl(var(--popover-foreground))"
93
+ },
94
+ primary: {
95
+ ...createColorsPalette("primary"),
96
+ DEFAULT: "hsl(var(--primary))"
97
+ },
98
+ ring: "hsl(var(--ring))",
99
+ secondary: {
100
+ DEFAULT: "hsl(var(--secondary))",
101
+ desc: "hsl(var(--secondary-desc))",
102
+ foreground: "hsl(var(--secondary-foreground))"
103
+ }
104
+ };
105
+ const customColors = {
106
+ green: {
107
+ ...createColorsPalette("green"),
108
+ foreground: "hsl(var(--success-foreground))"
109
+ },
110
+ header: {
111
+ DEFAULT: "hsl(var(--header))"
112
+ },
113
+ heavy: {
114
+ DEFAULT: "hsl(var(--heavy))",
115
+ foreground: "hsl(var(--heavy-foreground))"
116
+ },
117
+ main: {
118
+ DEFAULT: "hsl(var(--main))"
119
+ },
120
+ overlay: {
121
+ content: "hsl(var(--overlay-content))",
122
+ DEFAULT: "hsl(var(--overlay))"
123
+ },
124
+ red: {
125
+ ...createColorsPalette("red"),
126
+ foreground: "hsl(var(--destructive-foreground))"
127
+ },
128
+ sidebar: {
129
+ deep: "hsl(var(--sidebar-deep))",
130
+ DEFAULT: "hsl(var(--sidebar))"
131
+ },
132
+ success: {
133
+ ...createColorsPalette("success"),
134
+ DEFAULT: "hsl(var(--success))"
135
+ },
136
+ warning: {
137
+ ...createColorsPalette("warning"),
138
+ DEFAULT: "hsl(var(--warning))"
139
+ },
140
+ yellow: {
141
+ ...createColorsPalette("yellow"),
142
+ foreground: "hsl(var(--warning-foreground))"
143
+ }
144
+ };
145
+ const config = {
146
+ content: [
147
+ "./index.html",
148
+ ...tailwindPackages.map(
149
+ (item) => path.join(item, "src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}")
150
+ )
151
+ ],
152
+ darkMode: "selector",
153
+ plugins: [animate, typographyPlugin, addDynamicIconSelectors(), enterAnimationPlugin],
154
+ prefix: "",
155
+ theme: {
156
+ container: {
157
+ center: true,
158
+ padding: "2rem",
159
+ screens: {
160
+ "2xl": "1400px"
161
+ }
162
+ },
163
+ extend: {
164
+ animation: {
165
+ "accordion-down": "accordion-down 0.2s ease-out",
166
+ "accordion-up": "accordion-up 0.2s ease-out",
167
+ "collapsible-down": "collapsible-down 0.2s ease-in-out",
168
+ "collapsible-up": "collapsible-up 0.2s ease-in-out",
169
+ float: "float 5s linear 0ms infinite"
170
+ }
171
+ },
172
+ animationDuration: {
173
+ "2000": "2000ms",
174
+ "3000": "3000ms"
175
+ },
176
+ borderRadius: {
177
+ lg: "var(--radius)",
178
+ md: "calc(var(--radius) - 2px)",
179
+ sm: "calc(var(--radius) - 4px)",
180
+ xl: "calc(var(--radius) + 4px)"
181
+ },
182
+ boxShadow: {
183
+ float: `0 6px 16px 0 rgb(0 0 0 / 8%),
184
+ 0 3px 6px -4px rgb(0 0 0 / 12%),
185
+ 0 9px 28px 8px rgb(0 0 0 / 5%)`
186
+ },
187
+ colors: {
188
+ ...customColors,
189
+ ...shadcnUiColors
190
+ },
191
+ fontFamily: {
192
+ sans: ["var(--font-family)"]
193
+ },
194
+ keyframes: {
195
+ "accordion-down": {
196
+ from: { height: "0" },
197
+ to: { height: "var(--radix-accordion-content-height)" }
198
+ },
199
+ "accordion-up": {
200
+ from: { height: "var(--radix-accordion-content-height)" },
201
+ to: { height: "0" }
202
+ },
203
+ "collapsible-down": {
204
+ from: { height: "0" },
205
+ to: { height: "var(--radix-collapsible-content-height)" }
206
+ },
207
+ "collapsible-up": {
208
+ from: { height: "var(--radix-collapsible-content-height)" },
209
+ to: { height: "0" }
210
+ },
211
+ float: {
212
+ "0%": { transform: "translateY(0)" },
213
+ "50%": { transform: "translateY(-20px)" },
214
+ "100%": { transform: "translateY(0)" }
215
+ }
216
+ },
217
+ zIndex: {
218
+ "100": "100",
219
+ "1000": "1000"
220
+ }
221
+ },
222
+ safelist: ["dark"]
223
+ };
224
+ function createColorsPalette(name) {
225
+ return {
226
+ 50: `hsl(var(--${name}-50))`,
227
+ 100: `hsl(var(--${name}-100))`,
228
+ 200: `hsl(var(--${name}-200))`,
229
+ 300: `hsl(var(--${name}-300))`,
230
+ 400: `hsl(var(--${name}-400))`,
231
+ 500: `hsl(var(--${name}-500))`,
232
+ 600: `hsl(var(--${name}-600))`,
233
+ 700: `hsl(var(--${name}-700))`,
234
+ // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
235
+ active: `hsl(var(--${name}-700))`,
236
+ // 浅色背景，适用于输入框或表单区域的背景。
237
+ "background-light": `hsl(var(--${name}-200))`,
238
+ // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
239
+ "background-lighter": `hsl(var(--${name}-100))`,
240
+ // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
241
+ "background-lightest": `hsl(var(--${name}-50))`,
242
+ // 适用于普通边框，可能用于按钮或卡片的边框。
243
+ border: `hsl(var(--${name}-400))`,
244
+ // 浅色边框，适用于输入框或卡片的边框。
245
+ "border-light": `hsl(var(--${name}-300))`,
246
+ foreground: `hsl(var(--${name}-foreground))`,
247
+ // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
248
+ hover: `hsl(var(--${name}-600))`,
249
+ // 主色文本
250
+ text: `hsl(var(--${name}-500))`,
251
+ // 主色文本激活态
252
+ "text-active": `hsl(var(--${name}-700))`,
253
+ // 主色文本悬浮态
254
+ "text-hover": `hsl(var(--${name}-600))`
255
+ };
256
+ }
257
+
258
+ export { config as default };
package/dist/postcss.config.cjs ADDED
@@ -0,0 +1,23 @@
1
+ 'use strict';
2
+
3
+ const index = require('./index.cjs');
4
+ require('node:path');
5
+ require('@iconify/tailwind');
6
+ require('@manypkg/get-packages');
7
+ require('@tailwindcss/typography');
8
+ require('tailwindcss-animate');
9
+ require('tailwindcss/plugin.js');
10
+
11
+ const postcss_config = {
12
+ plugins: {
13
+ ...process.env.NODE_ENV === "production" ? { cssnano: {} } : {},
14
+ autoprefixer: {},
15
+ // 修复 element-plus的样式和tailwindcss冲突问题
16
+ "postcss-antd-fixes": { prefixes: ["el"] },
17
+ "postcss-import": {},
18
+ "postcss-preset-env": {},
19
+ tailwindcss: { config: index }
20
+ }
21
+ };
22
+
23
+ module.exports = postcss_config;
package/dist/postcss.config.mjs ADDED
@@ -0,0 +1,21 @@
1
+ import config from './index.mjs';
2
+ import 'node:path';
3
+ import '@iconify/tailwind';
4
+ import '@manypkg/get-packages';
5
+ import '@tailwindcss/typography';
6
+ import 'tailwindcss-animate';
7
+ import 'tailwindcss/plugin.js';
8
+
9
+ const postcss_config = {
10
+ plugins: {
11
+ ...process.env.NODE_ENV === "production" ? { cssnano: {} } : {},
12
+ autoprefixer: {},
13
+ // 修复 element-plus的样式和tailwindcss冲突问题
14
+ "postcss-antd-fixes": { prefixes: ["el"] },
15
+ "postcss-import": {},
16
+ "postcss-preset-env": {},
17
+ tailwindcss: { config }
18
+ }
19
+ };
20
+
21
+ export { postcss_config as default };
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@dt-frames/tailwind-config",
3
+ "version": "4.0.1",
4
+ "description": "css原子化",
5
+ "scripts": {
6
+ "build": "pnpm unbuild"
7
+ },
8
+ "keywords": [],
9
+ "author": "",
10
+ "license": "ISC",
11
+ "main": "./dist/index.mjs",
12
+ "module": "./dist/index.mjs",
13
+ "exports": {
14
+ ".": {
15
+ "types": "./src/index.ts",
16
+ "import": "./dist/index.mjs",
17
+ "require": "./dist/index.cjs"
18
+ },
19
+ "./postcss": {
20
+ "types": "./src/postcss.config.ts",
21
+ "import": "./dist/postcss.config.mjs",
22
+ "require": "./dist/postcss.config.cjs",
23
+ "default": "./dist/postcss.config.mjs"
24
+ },
25
+ "./*": "./*"
26
+ },
27
+ "peerDependencies": {
28
+ "tailwindcss": "catalog:"
29
+ },
30
+ "dependencies": {
31
+ "@dt-frames/ts-config": "workspace:*",
32
+ "@iconify/json": "catalog:",
33
+ "@iconify/tailwind": "catalog:",
34
+ "@manypkg/get-packages": "catalog:",
35
+ "@tailwindcss/postcss": "catalog:",
36
+ "@tailwindcss/typography": "catalog:",
37
+ "@types/node": "catalog:",
38
+ "autoprefixer": "catalog:",
39
+ "cssnano": "catalog:",
40
+ "postcss": "catalog:",
41
+ "postcss-import": "catalog:",
42
+ "tailwindcss-animate": "catalog:",
43
+ "unbuild": "catalog:"
44
+ },
45
+ "devDependencies": {
46
+ "@types/postcss-import": "^14.0.3"
47
+ }
48
+ }
package/src/index.ts ADDED
@@ -0,0 +1,218 @@
1
+ import type { Config } from 'tailwindcss'
2
+ import path from 'node:path'
3
+ import { addDynamicIconSelectors } from '@iconify/tailwind'
4
+ import { getPackagesSync } from '@manypkg/get-packages'
5
+ import typographyPlugin from '@tailwindcss/typography'
6
+ import animate from 'tailwindcss-animate'
7
+ import { enterAnimationPlugin } from './plugins/entry'
8
+
9
+ const { packages } = getPackagesSync(process.cwd())
10
+ const tailwindPackages: string[] = []
11
+ packages.forEach(pkg => {
12
+ tailwindPackages.push(pkg.dir)
13
+ })
14
+
15
+ const shadcnUiColors = {
16
+ accent: {
17
+ DEFAULT: 'hsl(var(--accent))',
18
+ foreground: 'hsl(var(--accent-foreground))',
19
+ hover: 'hsl(var(--accent-hover))',
20
+ lighter: 'has(val(--accent-lighter))'
21
+ },
22
+ background: {
23
+ deep: 'hsl(var(--background-deep))',
24
+ DEFAULT: 'hsl(var(--background))'
25
+ },
26
+ border: {
27
+ DEFAULT: 'hsl(var(--border))'
28
+ },
29
+ card: {
30
+ DEFAULT: 'hsl(var(--card))',
31
+ foreground: 'hsl(var(--card-foreground))'
32
+ },
33
+ destructive: {
34
+ ...createColorsPalette('destructive'),
35
+ DEFAULT: 'hsl(var(--destructive))'
36
+ },
37
+ foreground: {
38
+ DEFAULT: 'hsl(var(--foreground))'
39
+ },
40
+ input: {
41
+ background: 'hsl(var(--input-background))',
42
+ DEFAULT: 'hsl(var(--input))'
43
+ },
44
+ muted: {
45
+ DEFAULT: 'hsl(var(--muted))',
46
+ foreground: 'hsl(var(--muted-foreground))'
47
+ },
48
+ popover: {
49
+ DEFAULT: 'hsl(var(--popover))',
50
+ foreground: 'hsl(var(--popover-foreground))'
51
+ },
52
+ primary: {
53
+ ...createColorsPalette('primary'),
54
+ DEFAULT: 'hsl(var(--primary))'
55
+ },
56
+ ring: 'hsl(var(--ring))',
57
+ secondary: {
58
+ DEFAULT: 'hsl(var(--secondary))',
59
+ desc: 'hsl(var(--secondary-desc))',
60
+ foreground: 'hsl(var(--secondary-foreground))'
61
+ }
62
+ }
63
+
64
+ const customColors = {
65
+ green: {
66
+ ...createColorsPalette('green'),
67
+ foreground: 'hsl(var(--success-foreground))'
68
+ },
69
+ header: {
70
+ DEFAULT: 'hsl(var(--header))'
71
+ },
72
+ heavy: {
73
+ DEFAULT: 'hsl(var(--heavy))',
74
+ foreground: 'hsl(var(--heavy-foreground))'
75
+ },
76
+ main: {
77
+ DEFAULT: 'hsl(var(--main))'
78
+ },
79
+ overlay: {
80
+ content: 'hsl(var(--overlay-content))',
81
+ DEFAULT: 'hsl(var(--overlay))'
82
+ },
83
+ red: {
84
+ ...createColorsPalette('red'),
85
+ foreground: 'hsl(var(--destructive-foreground))'
86
+ },
87
+ sidebar: {
88
+ deep: 'hsl(var(--sidebar-deep))',
89
+ DEFAULT: 'hsl(var(--sidebar))'
90
+ },
91
+ success: {
92
+ ...createColorsPalette('success'),
93
+ DEFAULT: 'hsl(var(--success))'
94
+ },
95
+ warning: {
96
+ ...createColorsPalette('warning'),
97
+ DEFAULT: 'hsl(var(--warning))'
98
+ },
99
+ yellow: {
100
+ ...createColorsPalette('yellow'),
101
+ foreground: 'hsl(var(--warning-foreground))'
102
+ }
103
+ }
104
+
105
+ export default {
106
+ content: [
107
+ './index.html',
108
+ ...tailwindPackages.map(item =>
109
+ path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}')
110
+ )
111
+ ],
112
+ darkMode: 'selector',
113
+ plugins: [animate, typographyPlugin, addDynamicIconSelectors(), enterAnimationPlugin],
114
+ prefix: '',
115
+ theme: {
116
+ container: {
117
+ center: true,
118
+ padding: '2rem',
119
+ screens: {
120
+ '2xl': '1400px'
121
+ }
122
+ },
123
+ extend: {
124
+ animation: {
125
+ 'accordion-down': 'accordion-down 0.2s ease-out',
126
+ 'accordion-up': 'accordion-up 0.2s ease-out',
127
+ 'collapsible-down': 'collapsible-down 0.2s ease-in-out',
128
+ 'collapsible-up': 'collapsible-up 0.2s ease-in-out',
129
+ float: 'float 5s linear 0ms infinite'
130
+ }
131
+ },
132
+ animationDuration: {
133
+ '2000': '2000ms',
134
+ '3000': '3000ms'
135
+ },
136
+ borderRadius: {
137
+ lg: 'var(--radius)',
138
+ md: 'calc(var(--radius) - 2px)',
139
+ sm: 'calc(var(--radius) - 4px)',
140
+ xl: 'calc(var(--radius) + 4px)'
141
+ },
142
+ boxShadow: {
143
+ float: `0 6px 16px 0 rgb(0 0 0 / 8%),
144
+ 0 3px 6px -4px rgb(0 0 0 / 12%),
145
+ 0 9px 28px 8px rgb(0 0 0 / 5%)`
146
+ },
147
+ colors: {
148
+ ...customColors,
149
+ ...shadcnUiColors
150
+ },
151
+ fontFamily: {
152
+ sans: ['var(--font-family)']
153
+ },
154
+ keyframes: {
155
+ 'accordion-down': {
156
+ from: { height: '0' },
157
+ to: { height: 'var(--radix-accordion-content-height)' }
158
+ },
159
+ 'accordion-up': {
160
+ from: { height: 'var(--radix-accordion-content-height)' },
161
+ to: { height: '0' }
162
+ },
163
+ 'collapsible-down': {
164
+ from: { height: '0' },
165
+ to: { height: 'var(--radix-collapsible-content-height)' }
166
+ },
167
+ 'collapsible-up': {
168
+ from: { height: 'var(--radix-collapsible-content-height)' },
169
+ to: { height: '0' }
170
+ },
171
+ float: {
172
+ '0%': { transform: 'translateY(0)' },
173
+ '50%': { transform: 'translateY(-20px)' },
174
+ '100%': { transform: 'translateY(0)' }
175
+ }
176
+ },
177
+ zIndex: {
178
+ '100': '100',
179
+ '1000': '1000'
180
+ }
181
+ },
182
+ safelist: ['dark']
183
+ } as Config
184
+
185
+ function createColorsPalette(name: string) {
186
+ return {
187
+ 50: `hsl(var(--${name}-50))`,
188
+ 100: `hsl(var(--${name}-100))`,
189
+ 200: `hsl(var(--${name}-200))`,
190
+ 300: `hsl(var(--${name}-300))`,
191
+ 400: `hsl(var(--${name}-400))`,
192
+ 500: `hsl(var(--${name}-500))`,
193
+ 600: `hsl(var(--${name}-600))`,
194
+ 700: `hsl(var(--${name}-700))`,
195
+
196
+ // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
197
+ active: `hsl(var(--${name}-700))`,
198
+ // 浅色背景，适用于输入框或表单区域的背景。
199
+ 'background-light': `hsl(var(--${name}-200))`,
200
+ // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
201
+ 'background-lighter': `hsl(var(--${name}-100))`,
202
+ // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
203
+ 'background-lightest': `hsl(var(--${name}-50))`,
204
+ // 适用于普通边框，可能用于按钮或卡片的边框。
205
+ border: `hsl(var(--${name}-400))`,
206
+ // 浅色边框，适用于输入框或卡片的边框。
207
+ 'border-light': `hsl(var(--${name}-300))`,
208
+ foreground: `hsl(var(--${name}-foreground))`,
209
+ // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
210
+ hover: `hsl(var(--${name}-600))`,
211
+ // 主色文本
212
+ text: `hsl(var(--${name}-500))`,
213
+ // 主色文本激活态
214
+ 'text-active': `hsl(var(--${name}-700))`,
215
+ // 主色文本悬浮态
216
+ 'text-hover': `hsl(var(--${name}-600))`
217
+ }
218
+ }
package/src/plugins/entry.ts ADDED
@@ -0,0 +1,54 @@
1
+ import plugin from 'tailwindcss/plugin.js'
2
+
3
+ const enterAnimationPlugin = plugin(({ addUtilities }) => {
4
+ const maxChild = 5
5
+ const utilities: Record<string, any> = {}
6
+
7
+ for (let i = 1; i <= maxChild; i++) {
8
+ const baseDelay = 0.1
9
+ const delay = `${baseDelay * i}s`
10
+
11
+ utilities[`.enter-x:nth-child(${i})`] = {
12
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
13
+ opacity: '0',
14
+ transform: `translateX(50px)`,
15
+ }
16
+
17
+ utilities[`.enter-y:nth-child(${i})`] = {
18
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
19
+ opacity: '0',
20
+ transform: `translateY(50px)`,
21
+ }
22
+
23
+ utilities[`.-enter-x:nth-child(${i})`] = {
24
+ animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
25
+ opacity: '0',
26
+ transform: `translateX(-50px)`,
27
+ }
28
+
29
+ utilities[`.-enter-y:nth-child(${i})`] = {
30
+ animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
31
+ opacity: '0',
32
+ transform: `translateY(-50px)`,
33
+ }
34
+ }
35
+
36
+ // 添加动画关键帧
37
+ addUtilities(utilities)
38
+ addUtilities({
39
+ '@keyframes enter-x-animation': {
40
+ to: {
41
+ opacity: '1',
42
+ transform: 'translateX(0)'
43
+ }
44
+ },
45
+ '@keyframes enter-y-animation': {
46
+ to: {
47
+ opacity: '1',
48
+ transform: 'translateY(0)'
49
+ }
50
+ }
51
+ })
52
+ })
53
+
54
+ export { enterAnimationPlugin }
package/src/postcss.config.ts ADDED
@@ -0,0 +1,13 @@
1
+ import config from './index'
2
+
3
+ export default {
4
+ plugins: {
5
+ ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
6
+ autoprefixer: {},
7
+ // 修复 element-plus的样式和tailwindcss冲突问题
8
+ 'postcss-antd-fixes': { prefixes: ['el'] },
9
+ 'postcss-import': {},
10
+ 'postcss-preset-env': {},
11
+ tailwindcss: { config }
12
+ }
13
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/tsconfig",
3
+ "extends": "@dt-frames/ts-config/node.json",
4
+ "compilerOptions": {
5
+ "moduleResolution": "bundler"
6
+ },
7
+ "include": ["src"],
8
+ "exclude": ["node_modules"]
9
+ }