denwa-web-shared 1.0.60 → 1.0.62

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 (61) hide show
  1. package/dist/client/index.cjs.js +198 -3337
  2. package/dist/client/index.es.js +198 -3348
  3. package/dist/denwa-web-shared.cjs.js +1 -1
  4. package/dist/denwa-web-shared.es.js +0 -1
  5. package/dist/server/denwa-web-shared.css +1 -0
  6. package/dist/server/index.cjs.js +1219 -7089
  7. package/dist/server/index.es.js +1195 -7130
  8. package/dist/server/lib/index.d.ts +1 -0
  9. package/dist/server/lib/openapi-axios/const/defaultOptions.d.ts +5 -0
  10. package/dist/server/lib/openapi-axios/const/methods.d.ts +18 -0
  11. package/dist/server/lib/openapi-axios/index.d.ts +80 -0
  12. package/dist/server/lib/openapi-axios/interpolate-params.d.ts +11 -0
  13. package/dist/server/lib/openapi-axios/types/options.d.ts +27 -0
  14. package/dist/server/lib/openapi-axios/types/requestParameters.d.ts +22 -0
  15. package/dist/server/lib/openapi-axios/types/response.d.ts +100 -0
  16. package/dist/server/lib/openapi-axios/types/schemeTypes.d.ts +69 -0
  17. package/dist/server/lib/openapi-axios/types/serializer.d.ts +21 -0
  18. package/dist/server/lib/openapi-axios/types/utils.d.ts +44 -0
  19. package/dist/server/lib/openapi-axios/utils/querySerializer.d.ts +3 -0
  20. package/dist/server/lib/openapi-axios/utils/response-converters/convertToAll.d.ts +5 -0
  21. package/dist/server/lib/openapi-axios/utils/response-converters/convertToAxios.d.ts +5 -0
  22. package/dist/server/lib/openapi-axios/utils/response-converters/convertToFetch.d.ts +5 -0
  23. package/dist/src/client/hooks/index.d.ts +4 -0
  24. package/dist/src/client/hooks/use-appear-animation.d.ts +17 -0
  25. package/dist/src/client/hooks/use-disable-scroll.d.ts +1 -0
  26. package/dist/src/client/hooks/use-is-client.d.ts +1 -0
  27. package/dist/src/client/hooks/use-view-port.d.ts +24 -0
  28. package/dist/src/client/index.d.ts +2 -0
  29. package/dist/src/client/ui/animated-div.d.ts +8 -0
  30. package/dist/src/client/ui/header-wrapper.d.ts +10 -0
  31. package/dist/src/client/ui/index.d.ts +2 -0
  32. package/dist/src/client/ui/infinity-list.d.ts +10 -0
  33. package/dist/src/server/constants/index.d.ts +45 -0
  34. package/dist/src/server/index.d.ts +5 -0
  35. package/dist/src/server/lib/css.d.ts +2 -0
  36. package/dist/src/server/lib/files.d.ts +82 -0
  37. package/dist/src/server/lib/index.d.ts +4 -0
  38. package/dist/src/server/lib/openapi-axios/const/defaultOptions.d.ts +5 -0
  39. package/dist/src/server/lib/openapi-axios/const/methods.d.ts +18 -0
  40. package/dist/src/server/lib/openapi-axios/index.d.ts +80 -0
  41. package/dist/src/server/lib/openapi-axios/interpolate-params.d.ts +11 -0
  42. package/dist/src/server/lib/openapi-axios/types/options.d.ts +27 -0
  43. package/dist/src/server/lib/openapi-axios/types/requestParameters.d.ts +22 -0
  44. package/dist/src/server/lib/openapi-axios/types/response.d.ts +100 -0
  45. package/dist/src/server/lib/openapi-axios/types/schemeTypes.d.ts +69 -0
  46. package/dist/src/server/lib/openapi-axios/types/serializer.d.ts +21 -0
  47. package/dist/src/server/lib/openapi-axios/types/utils.d.ts +44 -0
  48. package/dist/src/server/lib/openapi-axios/utils/querySerializer.d.ts +3 -0
  49. package/dist/src/server/lib/openapi-axios/utils/response-converters/convertToAll.d.ts +5 -0
  50. package/dist/src/server/lib/openapi-axios/utils/response-converters/convertToAxios.d.ts +5 -0
  51. package/dist/src/server/lib/openapi-axios/utils/response-converters/convertToFetch.d.ts +5 -0
  52. package/dist/src/server/lib/utils.d.ts +253 -0
  53. package/dist/src/server/schemas/index.d.ts +31 -0
  54. package/dist/src/server/types/index.d.ts +70 -0
  55. package/dist/src/server/types/picture-data.d.ts +14 -0
  56. package/dist/src/server/ui/container.d.ts +5 -0
  57. package/dist/src/server/ui/image.d.ts +25 -0
  58. package/dist/src/server/ui/index.d.ts +3 -0
  59. package/dist/src/server/ui/video.d.ts +2 -0
  60. package/package.json +31 -28
  61. /package/dist/{index.d.ts → src/index.d.ts} +0 -0
@@ -1,3343 +1,204 @@
1
- "use strict";
2
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const useDisableScroll = (isDisableScroll) => {
6
- React.useEffect(() => {
7
- if (!isDisableScroll) return;
8
- const scrollPosition = window.scrollY;
9
- return () => {
10
- window.scrollTo(0, scrollPosition);
11
- };
12
- }, []);
13
- };
14
- const useIsClient = () => {
15
- const [isClient, setIsClient] = React.useState(false);
16
- React.useEffect(() => {
17
- setIsClient(true);
18
- }, []);
19
- return isClient;
20
- };
21
- function on(obj) {
22
- var args = [];
23
- for (var _i = 1; _i < arguments.length; _i++) {
24
- args[_i - 1] = arguments[_i];
25
- }
26
- if (obj && obj.addEventListener) {
27
- obj.addEventListener.apply(obj, args);
28
- }
29
- }
30
- function off(obj) {
31
- var args = [];
32
- for (var _i = 1; _i < arguments.length; _i++) {
33
- args[_i - 1] = arguments[_i];
34
- }
35
- if (obj && obj.removeEventListener) {
36
- obj.removeEventListener.apply(obj, args);
37
- }
38
- }
39
- var isBrowser = typeof window !== "undefined";
40
- var useEffectOnce = function(effect) {
41
- React.useEffect(effect, []);
42
- };
43
- var useIntersection = function(ref, options) {
44
- var _a = React.useState(null), intersectionObserverEntry = _a[0], setIntersectionObserverEntry = _a[1];
45
- React.useEffect(function() {
46
- if (ref.current && typeof IntersectionObserver === "function") {
47
- var handler = function(entries) {
48
- setIntersectionObserverEntry(entries[0]);
49
- };
50
- var observer_1 = new IntersectionObserver(handler, options);
51
- observer_1.observe(ref.current);
52
- return function() {
53
- setIntersectionObserverEntry(null);
54
- observer_1.disconnect();
55
- };
56
- }
57
- return function() {
58
- };
59
- }, [ref.current, options.threshold, options.root, options.rootMargin]);
60
- return intersectionObserverEntry;
61
- };
62
- var getInitialState = function(query, defaultState) {
63
- if (isBrowser) {
64
- return window.matchMedia(query).matches;
65
- }
66
- if (process.env.NODE_ENV !== "production") {
67
- console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
68
- }
69
- return false;
70
- };
71
- var useMedia = function(query, defaultState) {
72
- var _a = React.useState(getInitialState(query)), state = _a[0], setState = _a[1];
73
- React.useEffect(function() {
74
- var mounted = true;
75
- var mql = window.matchMedia(query);
76
- var onChange = function() {
77
- if (!mounted) {
78
- return;
79
- }
80
- setState(!!mql.matches);
81
- };
82
- mql.addEventListener("change", onChange);
83
- setState(mql.matches);
84
- return function() {
85
- mounted = false;
86
- mql.removeEventListener("change", onChange);
87
- };
88
- }, [query]);
89
- return state;
90
- };
91
- var useUnmount = function(fn) {
92
- var fnRef = React.useRef(fn);
93
- fnRef.current = fn;
94
- useEffectOnce(function() {
95
- return function() {
96
- return fnRef.current();
97
- };
98
- });
99
- };
100
- var useRafState = function(initialState) {
101
- var frame = React.useRef(0);
102
- var _a = React.useState(initialState), state = _a[0], setState = _a[1];
103
- var setRafState = React.useCallback(function(value) {
104
- cancelAnimationFrame(frame.current);
105
- frame.current = requestAnimationFrame(function() {
106
- setState(value);
107
- });
108
- }, []);
109
- useUnmount(function() {
110
- cancelAnimationFrame(frame.current);
111
- });
112
- return [state, setRafState];
113
- };
114
- var useWindowScroll = function() {
115
- var _a = useRafState(function() {
116
- return {
117
- x: isBrowser ? window.pageXOffset : 0,
118
- y: isBrowser ? window.pageYOffset : 0
119
- };
120
- }), state = _a[0], setState = _a[1];
121
- React.useEffect(function() {
122
- var handler = function() {
123
- setState(function(state2) {
124
- var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
125
- return state2.x !== pageXOffset || state2.y !== pageYOffset ? {
126
- x: pageXOffset,
127
- y: pageYOffset
128
- } : state2;
129
- });
130
- };
131
- handler();
132
- on(window, "scroll", handler, {
133
- capture: false,
134
- passive: true
135
- });
136
- return function() {
137
- off(window, "scroll", handler);
138
- };
139
- }, []);
140
- return state;
141
- };
142
- const THEME = {
143
- VIEW_PORT: {
144
- SMALL: 320,
145
- MOBILE: 450,
146
- EXTRA_MEDIUM: 600,
147
- TABLET: 768,
148
- LAPTOP: 1024,
149
- LAPTOP_BIG: 1200
150
- }
151
- };
152
- const useLaptopBigViewPort = () => {
153
- const isLaptopBigMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`);
154
- const isLaptopBigMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`);
155
- return {
156
- isLaptopBigMinWidth,
157
- isLaptopBigMaxWidth
158
- };
159
- };
160
- const useLaptopViewPort = () => {
161
- const isLaptopMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.LAPTOP}px)`);
162
- const isLaptopMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.LAPTOP}px)`);
163
- return {
164
- isLaptopMinWidth,
165
- isLaptopMaxWidth
166
- };
167
- };
168
- const useTabletViewPort = () => {
169
- const isTabletMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.TABLET}px)`);
170
- const isTabletMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.TABLET}px)`);
171
- return {
172
- isTabletMinWidth,
173
- isTabletMaxWidth
174
- };
175
- };
176
- const useExtraMediumViewPort = () => {
177
- const isExtraMediumMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`);
178
- const isExtraMediumMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`);
179
- return {
180
- isExtraMediumMinWidth,
181
- isExtraMediumMaxWidth
182
- };
183
- };
184
- const useMobileViewPort = () => {
185
- const isMobileMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.MOBILE}px)`);
186
- const isMobileMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.MOBILE}px)`);
187
- return {
188
- isMobileMinWidth,
189
- isMobileMaxWidth
190
- };
191
- };
192
- const useSmallViewPort = () => {
193
- const isSmallMinWidth = useMedia(`(min-width: ${THEME.VIEW_PORT.SMALL}px)`);
194
- const isSmallMaxWidth = useMedia(`(max-width: ${THEME.VIEW_PORT.SMALL}px)`);
195
- return {
196
- isSmallMinWidth,
197
- isSmallMaxWidth
198
- };
199
- };
200
- function resolveElements(elementOrSelector, scope, selectorCache) {
201
- if (elementOrSelector == null) {
202
- return [];
203
- }
204
- if (elementOrSelector instanceof EventTarget) {
205
- return [elementOrSelector];
206
- } else if (typeof elementOrSelector === "string") {
207
- let root = document;
208
- const elements = root.querySelectorAll(elementOrSelector);
209
- return elements ? Array.from(elements) : [];
210
- }
211
- return Array.from(elementOrSelector).filter((element) => element != null);
212
- }
213
- const thresholds = {
214
- some: 0,
215
- all: 1
216
- };
217
- function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
218
- const elements = resolveElements(elementOrSelector);
219
- const activeIntersections = /* @__PURE__ */ new WeakMap();
220
- const onIntersectionChange = (entries) => {
221
- entries.forEach((entry) => {
222
- const onEnd = activeIntersections.get(entry.target);
223
- if (entry.isIntersecting === Boolean(onEnd))
224
- return;
225
- if (entry.isIntersecting) {
226
- const newOnEnd = onStart(entry.target, entry);
227
- if (typeof newOnEnd === "function") {
228
- activeIntersections.set(entry.target, newOnEnd);
229
- } else {
230
- observer.unobserve(entry.target);
231
- }
232
- } else if (typeof onEnd === "function") {
233
- onEnd(entry);
234
- activeIntersections.delete(entry.target);
235
- }
236
- });
237
- };
238
- const observer = new IntersectionObserver(onIntersectionChange, {
239
- root,
240
- rootMargin,
241
- threshold: typeof amount === "number" ? amount : thresholds[amount]
242
- });
243
- elements.forEach((element) => observer.observe(element));
244
- return () => observer.disconnect();
245
- }
246
- function useInView(ref, { root, margin, amount, once = false, initial = false } = {}) {
247
- const [isInView, setInView] = React.useState(initial);
248
- React.useEffect(() => {
249
- if (!ref.current || once && isInView)
250
- return;
251
- const onEnter = () => {
252
- setInView(true);
253
- return once ? void 0 : () => setInView(false);
254
- };
255
- const options = {
256
- root: root && root.current || void 0,
257
- margin,
258
- amount
259
- };
260
- return inView(ref.current, onEnter, options);
261
- }, [root, ref, margin, once, amount]);
262
- return isInView;
263
- }
264
- const useAppearAnimation = ({
265
- once = true,
266
- margin = "-100px",
267
- delay = 0.1,
268
- direction = "up",
269
- animationDistance = 50,
270
- duration = 0.8,
271
- ease = "easeOut"
272
- } = {}) => {
273
- const ref = React.useRef(null);
274
- const isInView = useInView(ref, { once, margin });
275
- const getInitialState2 = () => {
276
- switch (direction) {
277
- case "up":
278
- return { opacity: 0, y: animationDistance };
279
- case "down":
280
- return { opacity: 0, y: -animationDistance };
281
- case "left":
282
- return { opacity: 0, x: animationDistance };
283
- case "right":
284
- return { opacity: 0, x: -animationDistance };
285
- case "scale":
286
- return { opacity: 0, scale: 0.8 };
287
- case "fade":
288
- return { opacity: 0 };
289
- default:
290
- return { opacity: 0, y: animationDistance };
291
- }
292
- };
293
- const getAnimateState = () => {
294
- switch (direction) {
295
- case "up":
296
- case "down":
297
- return { opacity: 1, y: 0 };
298
- case "left":
299
- case "right":
300
- return { opacity: 1, x: 0 };
301
- case "scale":
302
- return { opacity: 1, scale: 1 };
303
- case "fade":
304
- return { opacity: 1 };
305
- default:
306
- return { opacity: 1, y: 0 };
307
- }
308
- };
309
- const motionProps = {
310
- initial: getInitialState2(),
311
- animate: isInView ? getAnimateState() : void 0,
312
- transition: {
313
- duration,
314
- ease,
315
- delay
316
- }
317
- };
318
- return { ref, isInView, motionProps };
319
- };
320
- function r(e) {
321
- var t, f, n = "";
322
- if ("string" == typeof e || "number" == typeof e) n += e;
323
- else if ("object" == typeof e) if (Array.isArray(e)) {
324
- var o = e.length;
325
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
326
- } else for (f in e) e[f] && (n && (n += " "), n += f);
327
- return n;
328
- }
329
- function clsx() {
330
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
331
- return n;
332
- }
333
- const CLASS_PART_SEPARATOR = "-";
334
- const createClassGroupUtils = (config) => {
335
- const classMap = createClassMap(config);
336
- const {
337
- conflictingClassGroups,
338
- conflictingClassGroupModifiers
339
- } = config;
340
- const getClassGroupId = (className) => {
341
- const classParts = className.split(CLASS_PART_SEPARATOR);
342
- if (classParts[0] === "" && classParts.length !== 1) {
343
- classParts.shift();
344
- }
345
- return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
346
- };
347
- const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
348
- const conflicts = conflictingClassGroups[classGroupId] || [];
349
- if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
350
- return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
351
- }
352
- return conflicts;
353
- };
354
- return {
355
- getClassGroupId,
356
- getConflictingClassGroupIds
357
- };
358
- };
359
- const getGroupRecursive = (classParts, classPartObject) => {
360
- var _a;
361
- if (classParts.length === 0) {
362
- return classPartObject.classGroupId;
363
- }
364
- const currentClassPart = classParts[0];
365
- const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
366
- const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
367
- if (classGroupFromNextClassPart) {
368
- return classGroupFromNextClassPart;
369
- }
370
- if (classPartObject.validators.length === 0) {
371
- return void 0;
372
- }
373
- const classRest = classParts.join(CLASS_PART_SEPARATOR);
374
- return (_a = classPartObject.validators.find(({
375
- validator
376
- }) => validator(classRest))) == null ? void 0 : _a.classGroupId;
377
- };
378
- const arbitraryPropertyRegex = /^\[(.+)\]$/;
379
- const getGroupIdForArbitraryProperty = (className) => {
380
- if (arbitraryPropertyRegex.test(className)) {
381
- const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
382
- const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
383
- if (property) {
384
- return "arbitrary.." + property;
385
- }
386
- }
387
- };
388
- const createClassMap = (config) => {
389
- const {
390
- theme,
391
- classGroups
392
- } = config;
393
- const classMap = {
394
- nextPart: /* @__PURE__ */ new Map(),
395
- validators: []
396
- };
397
- for (const classGroupId in classGroups) {
398
- processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
399
- }
400
- return classMap;
401
- };
402
- const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
403
- classGroup.forEach((classDefinition) => {
404
- if (typeof classDefinition === "string") {
405
- const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
406
- classPartObjectToEdit.classGroupId = classGroupId;
407
- return;
408
- }
409
- if (typeof classDefinition === "function") {
410
- if (isThemeGetter(classDefinition)) {
411
- processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
412
- return;
413
- }
414
- classPartObject.validators.push({
415
- validator: classDefinition,
416
- classGroupId
417
- });
418
- return;
419
- }
420
- Object.entries(classDefinition).forEach(([key, classGroup2]) => {
421
- processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
422
- });
423
- });
424
- };
425
- const getPart = (classPartObject, path) => {
426
- let currentClassPartObject = classPartObject;
427
- path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
428
- if (!currentClassPartObject.nextPart.has(pathPart)) {
429
- currentClassPartObject.nextPart.set(pathPart, {
430
- nextPart: /* @__PURE__ */ new Map(),
431
- validators: []
432
- });
433
- }
434
- currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
435
- });
436
- return currentClassPartObject;
437
- };
438
- const isThemeGetter = (func) => func.isThemeGetter;
439
- const createLruCache = (maxCacheSize) => {
440
- if (maxCacheSize < 1) {
441
- return {
442
- get: () => void 0,
443
- set: () => {
444
- }
445
- };
446
- }
447
- let cacheSize = 0;
448
- let cache = /* @__PURE__ */ new Map();
449
- let previousCache = /* @__PURE__ */ new Map();
450
- const update = (key, value) => {
451
- cache.set(key, value);
452
- cacheSize++;
453
- if (cacheSize > maxCacheSize) {
454
- cacheSize = 0;
455
- previousCache = cache;
456
- cache = /* @__PURE__ */ new Map();
457
- }
458
- };
459
- return {
460
- get(key) {
461
- let value = cache.get(key);
462
- if (value !== void 0) {
463
- return value;
464
- }
465
- if ((value = previousCache.get(key)) !== void 0) {
466
- update(key, value);
467
- return value;
468
- }
469
- },
470
- set(key, value) {
471
- if (cache.has(key)) {
472
- cache.set(key, value);
473
- } else {
474
- update(key, value);
475
- }
476
- }
477
- };
478
- };
479
- const IMPORTANT_MODIFIER = "!";
480
- const MODIFIER_SEPARATOR = ":";
481
- const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
482
- const createParseClassName = (config) => {
483
- const {
484
- prefix,
485
- experimentalParseClassName
486
- } = config;
487
- let parseClassName = (className) => {
488
- const modifiers = [];
489
- let bracketDepth = 0;
490
- let parenDepth = 0;
491
- let modifierStart = 0;
492
- let postfixModifierPosition;
493
- for (let index = 0; index < className.length; index++) {
494
- let currentCharacter = className[index];
495
- if (bracketDepth === 0 && parenDepth === 0) {
496
- if (currentCharacter === MODIFIER_SEPARATOR) {
497
- modifiers.push(className.slice(modifierStart, index));
498
- modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
499
- continue;
500
- }
501
- if (currentCharacter === "/") {
502
- postfixModifierPosition = index;
503
- continue;
504
- }
505
- }
506
- if (currentCharacter === "[") {
507
- bracketDepth++;
508
- } else if (currentCharacter === "]") {
509
- bracketDepth--;
510
- } else if (currentCharacter === "(") {
511
- parenDepth++;
512
- } else if (currentCharacter === ")") {
513
- parenDepth--;
514
- }
515
- }
516
- const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
517
- const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
518
- const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
519
- const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
520
- return {
521
- modifiers,
522
- hasImportantModifier,
523
- baseClassName,
524
- maybePostfixModifierPosition
525
- };
526
- };
527
- if (prefix) {
528
- const fullPrefix = prefix + MODIFIER_SEPARATOR;
529
- const parseClassNameOriginal = parseClassName;
530
- parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
531
- isExternal: true,
532
- modifiers: [],
533
- hasImportantModifier: false,
534
- baseClassName: className,
535
- maybePostfixModifierPosition: void 0
536
- };
537
- }
538
- if (experimentalParseClassName) {
539
- const parseClassNameOriginal = parseClassName;
540
- parseClassName = (className) => experimentalParseClassName({
541
- className,
542
- parseClassName: parseClassNameOriginal
543
- });
544
- }
545
- return parseClassName;
546
- };
547
- const stripImportantModifier = (baseClassName) => {
548
- if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
549
- return baseClassName.substring(0, baseClassName.length - 1);
550
- }
551
- if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
552
- return baseClassName.substring(1);
553
- }
554
- return baseClassName;
555
- };
556
- const createSortModifiers = (config) => {
557
- const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map((modifier) => [modifier, true]));
558
- const sortModifiers = (modifiers) => {
559
- if (modifiers.length <= 1) {
560
- return modifiers;
561
- }
562
- const sortedModifiers = [];
563
- let unsortedModifiers = [];
564
- modifiers.forEach((modifier) => {
565
- const isPositionSensitive = modifier[0] === "[" || orderSensitiveModifiers[modifier];
566
- if (isPositionSensitive) {
567
- sortedModifiers.push(...unsortedModifiers.sort(), modifier);
568
- unsortedModifiers = [];
569
- } else {
570
- unsortedModifiers.push(modifier);
571
- }
572
- });
573
- sortedModifiers.push(...unsortedModifiers.sort());
574
- return sortedModifiers;
575
- };
576
- return sortModifiers;
577
- };
578
- const createConfigUtils = (config) => ({
579
- cache: createLruCache(config.cacheSize),
580
- parseClassName: createParseClassName(config),
581
- sortModifiers: createSortModifiers(config),
582
- ...createClassGroupUtils(config)
583
- });
584
- const SPLIT_CLASSES_REGEX = /\s+/;
585
- const mergeClassList = (classList, configUtils) => {
586
- const {
587
- parseClassName,
588
- getClassGroupId,
589
- getConflictingClassGroupIds,
590
- sortModifiers
591
- } = configUtils;
592
- const classGroupsInConflict = [];
593
- const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
594
- let result = "";
595
- for (let index = classNames.length - 1; index >= 0; index -= 1) {
596
- const originalClassName = classNames[index];
597
- const {
598
- isExternal,
599
- modifiers,
600
- hasImportantModifier,
601
- baseClassName,
602
- maybePostfixModifierPosition
603
- } = parseClassName(originalClassName);
604
- if (isExternal) {
605
- result = originalClassName + (result.length > 0 ? " " + result : result);
606
- continue;
607
- }
608
- let hasPostfixModifier = !!maybePostfixModifierPosition;
609
- let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
610
- if (!classGroupId) {
611
- if (!hasPostfixModifier) {
612
- result = originalClassName + (result.length > 0 ? " " + result : result);
613
- continue;
614
- }
615
- classGroupId = getClassGroupId(baseClassName);
616
- if (!classGroupId) {
617
- result = originalClassName + (result.length > 0 ? " " + result : result);
618
- continue;
619
- }
620
- hasPostfixModifier = false;
621
- }
622
- const variantModifier = sortModifiers(modifiers).join(":");
623
- const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
624
- const classId = modifierId + classGroupId;
625
- if (classGroupsInConflict.includes(classId)) {
626
- continue;
627
- }
628
- classGroupsInConflict.push(classId);
629
- const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
630
- for (let i = 0; i < conflictGroups.length; ++i) {
631
- const group = conflictGroups[i];
632
- classGroupsInConflict.push(modifierId + group);
633
- }
634
- result = originalClassName + (result.length > 0 ? " " + result : result);
635
- }
636
- return result;
637
- };
638
- function twJoin() {
639
- let index = 0;
640
- let argument;
641
- let resolvedValue;
642
- let string = "";
643
- while (index < arguments.length) {
644
- if (argument = arguments[index++]) {
645
- if (resolvedValue = toValue(argument)) {
646
- string && (string += " ");
647
- string += resolvedValue;
648
- }
649
- }
650
- }
651
- return string;
652
- }
653
- const toValue = (mix) => {
654
- if (typeof mix === "string") {
655
- return mix;
656
- }
657
- let resolvedValue;
658
- let string = "";
659
- for (let k = 0; k < mix.length; k++) {
660
- if (mix[k]) {
661
- if (resolvedValue = toValue(mix[k])) {
662
- string && (string += " ");
663
- string += resolvedValue;
664
- }
665
- }
666
- }
667
- return string;
668
- };
669
- function createTailwindMerge(createConfigFirst, ...createConfigRest) {
670
- let configUtils;
671
- let cacheGet;
672
- let cacheSet;
673
- let functionToCall = initTailwindMerge;
674
- function initTailwindMerge(classList) {
675
- const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
676
- configUtils = createConfigUtils(config);
677
- cacheGet = configUtils.cache.get;
678
- cacheSet = configUtils.cache.set;
679
- functionToCall = tailwindMerge;
680
- return tailwindMerge(classList);
681
- }
682
- function tailwindMerge(classList) {
683
- const cachedResult = cacheGet(classList);
684
- if (cachedResult) {
685
- return cachedResult;
686
- }
687
- const result = mergeClassList(classList, configUtils);
688
- cacheSet(classList, result);
689
- return result;
690
- }
691
- return function callTailwindMerge() {
692
- return functionToCall(twJoin.apply(null, arguments));
693
- };
694
- }
695
- const fromTheme = (key) => {
696
- const themeGetter = (theme) => theme[key] || [];
697
- themeGetter.isThemeGetter = true;
698
- return themeGetter;
699
- };
700
- const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
701
- const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
702
- const fractionRegex = /^\d+\/\d+$/;
703
- const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
704
- const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
705
- const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
706
- const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
707
- const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
708
- const isFraction = (value) => fractionRegex.test(value);
709
- const isNumber = (value) => !!value && !Number.isNaN(Number(value));
710
- const isInteger = (value) => !!value && Number.isInteger(Number(value));
711
- const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
712
- const isTshirtSize = (value) => tshirtUnitRegex.test(value);
713
- const isAny = () => true;
714
- const isLengthOnly = (value) => (
715
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
716
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
717
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
718
- lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
719
- );
720
- const isNever = () => false;
721
- const isShadow = (value) => shadowRegex.test(value);
722
- const isImage = (value) => imageRegex.test(value);
723
- const isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
724
- const isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
725
- const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
726
- const isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
727
- const isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
728
- const isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
729
- const isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
730
- const isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
731
- const isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
732
- const isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
733
- const isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
734
- const isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
735
- const isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
736
- const isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
737
- const isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
738
- const getIsArbitraryValue = (value, testLabel, testValue) => {
739
- const result = arbitraryValueRegex.exec(value);
740
- if (result) {
741
- if (result[1]) {
742
- return testLabel(result[1]);
743
- }
744
- return testValue(result[2]);
745
- }
746
- return false;
747
- };
748
- const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
749
- const result = arbitraryVariableRegex.exec(value);
750
- if (result) {
751
- if (result[1]) {
752
- return testLabel(result[1]);
753
- }
754
- return shouldMatchNoLabel;
755
- }
756
- return false;
757
- };
758
- const isLabelPosition = (label) => label === "position" || label === "percentage";
759
- const isLabelImage = (label) => label === "image" || label === "url";
760
- const isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
761
- const isLabelLength = (label) => label === "length";
762
- const isLabelNumber = (label) => label === "number";
763
- const isLabelFamilyName = (label) => label === "family-name";
764
- const isLabelShadow = (label) => label === "shadow";
765
- const getDefaultConfig = () => {
766
- const themeColor = fromTheme("color");
767
- const themeFont = fromTheme("font");
768
- const themeText = fromTheme("text");
769
- const themeFontWeight = fromTheme("font-weight");
770
- const themeTracking = fromTheme("tracking");
771
- const themeLeading = fromTheme("leading");
772
- const themeBreakpoint = fromTheme("breakpoint");
773
- const themeContainer = fromTheme("container");
774
- const themeSpacing = fromTheme("spacing");
775
- const themeRadius = fromTheme("radius");
776
- const themeShadow = fromTheme("shadow");
777
- const themeInsetShadow = fromTheme("inset-shadow");
778
- const themeTextShadow = fromTheme("text-shadow");
779
- const themeDropShadow = fromTheme("drop-shadow");
780
- const themeBlur = fromTheme("blur");
781
- const themePerspective = fromTheme("perspective");
782
- const themeAspect = fromTheme("aspect");
783
- const themeEase = fromTheme("ease");
784
- const themeAnimate = fromTheme("animate");
785
- const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
786
- const scalePosition = () => [
787
- "center",
788
- "top",
789
- "bottom",
790
- "left",
791
- "right",
792
- "top-left",
793
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
794
- "left-top",
795
- "top-right",
796
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
797
- "right-top",
798
- "bottom-right",
799
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
800
- "right-bottom",
801
- "bottom-left",
802
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
803
- "left-bottom"
804
- ];
805
- const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
806
- const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
807
- const scaleOverscroll = () => ["auto", "contain", "none"];
808
- const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
809
- const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
810
- const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
811
- const scaleGridColRowStartAndEnd = () => ["auto", {
812
- span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
813
- }, isInteger, isArbitraryVariable, isArbitraryValue];
814
- const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
815
- const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
816
- const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
817
- const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
818
- const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
819
- const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
820
- const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
821
- const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
822
- position: [isArbitraryVariable, isArbitraryValue]
823
- }];
824
- const scaleBgRepeat = () => ["no-repeat", {
825
- repeat: ["", "x", "y", "space", "round"]
826
- }];
827
- const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
828
- size: [isArbitraryVariable, isArbitraryValue]
829
- }];
830
- const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
831
- const scaleRadius = () => [
832
- // Deprecated since Tailwind CSS v4.0.0
833
- "",
834
- "none",
835
- "full",
836
- themeRadius,
837
- isArbitraryVariable,
838
- isArbitraryValue
839
- ];
840
- const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
841
- const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
842
- const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
843
- const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
844
- const scaleBlur = () => [
845
- // Deprecated since Tailwind CSS v4.0.0
846
- "",
847
- "none",
848
- themeBlur,
849
- isArbitraryVariable,
850
- isArbitraryValue
851
- ];
852
- const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
853
- const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
854
- const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
855
- const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
856
- return {
857
- cacheSize: 500,
858
- theme: {
859
- animate: ["spin", "ping", "pulse", "bounce"],
860
- aspect: ["video"],
861
- blur: [isTshirtSize],
862
- breakpoint: [isTshirtSize],
863
- color: [isAny],
864
- container: [isTshirtSize],
865
- "drop-shadow": [isTshirtSize],
866
- ease: ["in", "out", "in-out"],
867
- font: [isAnyNonArbitrary],
868
- "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
869
- "inset-shadow": [isTshirtSize],
870
- leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
871
- perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
872
- radius: [isTshirtSize],
873
- shadow: [isTshirtSize],
874
- spacing: ["px", isNumber],
875
- text: [isTshirtSize],
876
- "text-shadow": [isTshirtSize],
877
- tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
878
- },
879
- classGroups: {
880
- // --------------
881
- // --- Layout ---
882
- // --------------
883
- /**
884
- * Aspect Ratio
885
- * @see https://tailwindcss.com/docs/aspect-ratio
886
- */
887
- aspect: [{
888
- aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
889
- }],
890
- /**
891
- * Container
892
- * @see https://tailwindcss.com/docs/container
893
- * @deprecated since Tailwind CSS v4.0.0
894
- */
895
- container: ["container"],
896
- /**
897
- * Columns
898
- * @see https://tailwindcss.com/docs/columns
899
- */
900
- columns: [{
901
- columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
902
- }],
903
- /**
904
- * Break After
905
- * @see https://tailwindcss.com/docs/break-after
906
- */
907
- "break-after": [{
908
- "break-after": scaleBreak()
909
- }],
910
- /**
911
- * Break Before
912
- * @see https://tailwindcss.com/docs/break-before
913
- */
914
- "break-before": [{
915
- "break-before": scaleBreak()
916
- }],
917
- /**
918
- * Break Inside
919
- * @see https://tailwindcss.com/docs/break-inside
920
- */
921
- "break-inside": [{
922
- "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
923
- }],
924
- /**
925
- * Box Decoration Break
926
- * @see https://tailwindcss.com/docs/box-decoration-break
927
- */
928
- "box-decoration": [{
929
- "box-decoration": ["slice", "clone"]
930
- }],
931
- /**
932
- * Box Sizing
933
- * @see https://tailwindcss.com/docs/box-sizing
934
- */
935
- box: [{
936
- box: ["border", "content"]
937
- }],
938
- /**
939
- * Display
940
- * @see https://tailwindcss.com/docs/display
941
- */
942
- display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
943
- /**
944
- * Screen Reader Only
945
- * @see https://tailwindcss.com/docs/display#screen-reader-only
946
- */
947
- sr: ["sr-only", "not-sr-only"],
948
- /**
949
- * Floats
950
- * @see https://tailwindcss.com/docs/float
951
- */
952
- float: [{
953
- float: ["right", "left", "none", "start", "end"]
954
- }],
955
- /**
956
- * Clear
957
- * @see https://tailwindcss.com/docs/clear
958
- */
959
- clear: [{
960
- clear: ["left", "right", "both", "none", "start", "end"]
961
- }],
962
- /**
963
- * Isolation
964
- * @see https://tailwindcss.com/docs/isolation
965
- */
966
- isolation: ["isolate", "isolation-auto"],
967
- /**
968
- * Object Fit
969
- * @see https://tailwindcss.com/docs/object-fit
970
- */
971
- "object-fit": [{
972
- object: ["contain", "cover", "fill", "none", "scale-down"]
973
- }],
974
- /**
975
- * Object Position
976
- * @see https://tailwindcss.com/docs/object-position
977
- */
978
- "object-position": [{
979
- object: scalePositionWithArbitrary()
980
- }],
981
- /**
982
- * Overflow
983
- * @see https://tailwindcss.com/docs/overflow
984
- */
985
- overflow: [{
986
- overflow: scaleOverflow()
987
- }],
988
- /**
989
- * Overflow X
990
- * @see https://tailwindcss.com/docs/overflow
991
- */
992
- "overflow-x": [{
993
- "overflow-x": scaleOverflow()
994
- }],
995
- /**
996
- * Overflow Y
997
- * @see https://tailwindcss.com/docs/overflow
998
- */
999
- "overflow-y": [{
1000
- "overflow-y": scaleOverflow()
1001
- }],
1002
- /**
1003
- * Overscroll Behavior
1004
- * @see https://tailwindcss.com/docs/overscroll-behavior
1005
- */
1006
- overscroll: [{
1007
- overscroll: scaleOverscroll()
1008
- }],
1009
- /**
1010
- * Overscroll Behavior X
1011
- * @see https://tailwindcss.com/docs/overscroll-behavior
1012
- */
1013
- "overscroll-x": [{
1014
- "overscroll-x": scaleOverscroll()
1015
- }],
1016
- /**
1017
- * Overscroll Behavior Y
1018
- * @see https://tailwindcss.com/docs/overscroll-behavior
1019
- */
1020
- "overscroll-y": [{
1021
- "overscroll-y": scaleOverscroll()
1022
- }],
1023
- /**
1024
- * Position
1025
- * @see https://tailwindcss.com/docs/position
1026
- */
1027
- position: ["static", "fixed", "absolute", "relative", "sticky"],
1028
- /**
1029
- * Top / Right / Bottom / Left
1030
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1031
- */
1032
- inset: [{
1033
- inset: scaleInset()
1034
- }],
1035
- /**
1036
- * Right / Left
1037
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1038
- */
1039
- "inset-x": [{
1040
- "inset-x": scaleInset()
1041
- }],
1042
- /**
1043
- * Top / Bottom
1044
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1045
- */
1046
- "inset-y": [{
1047
- "inset-y": scaleInset()
1048
- }],
1049
- /**
1050
- * Start
1051
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1052
- */
1053
- start: [{
1054
- start: scaleInset()
1055
- }],
1056
- /**
1057
- * End
1058
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1059
- */
1060
- end: [{
1061
- end: scaleInset()
1062
- }],
1063
- /**
1064
- * Top
1065
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1066
- */
1067
- top: [{
1068
- top: scaleInset()
1069
- }],
1070
- /**
1071
- * Right
1072
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1073
- */
1074
- right: [{
1075
- right: scaleInset()
1076
- }],
1077
- /**
1078
- * Bottom
1079
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1080
- */
1081
- bottom: [{
1082
- bottom: scaleInset()
1083
- }],
1084
- /**
1085
- * Left
1086
- * @see https://tailwindcss.com/docs/top-right-bottom-left
1087
- */
1088
- left: [{
1089
- left: scaleInset()
1090
- }],
1091
- /**
1092
- * Visibility
1093
- * @see https://tailwindcss.com/docs/visibility
1094
- */
1095
- visibility: ["visible", "invisible", "collapse"],
1096
- /**
1097
- * Z-Index
1098
- * @see https://tailwindcss.com/docs/z-index
1099
- */
1100
- z: [{
1101
- z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
1102
- }],
1103
- // ------------------------
1104
- // --- Flexbox and Grid ---
1105
- // ------------------------
1106
- /**
1107
- * Flex Basis
1108
- * @see https://tailwindcss.com/docs/flex-basis
1109
- */
1110
- basis: [{
1111
- basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
1112
- }],
1113
- /**
1114
- * Flex Direction
1115
- * @see https://tailwindcss.com/docs/flex-direction
1116
- */
1117
- "flex-direction": [{
1118
- flex: ["row", "row-reverse", "col", "col-reverse"]
1119
- }],
1120
- /**
1121
- * Flex Wrap
1122
- * @see https://tailwindcss.com/docs/flex-wrap
1123
- */
1124
- "flex-wrap": [{
1125
- flex: ["nowrap", "wrap", "wrap-reverse"]
1126
- }],
1127
- /**
1128
- * Flex
1129
- * @see https://tailwindcss.com/docs/flex
1130
- */
1131
- flex: [{
1132
- flex: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
1133
- }],
1134
- /**
1135
- * Flex Grow
1136
- * @see https://tailwindcss.com/docs/flex-grow
1137
- */
1138
- grow: [{
1139
- grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
1140
- }],
1141
- /**
1142
- * Flex Shrink
1143
- * @see https://tailwindcss.com/docs/flex-shrink
1144
- */
1145
- shrink: [{
1146
- shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
1147
- }],
1148
- /**
1149
- * Order
1150
- * @see https://tailwindcss.com/docs/order
1151
- */
1152
- order: [{
1153
- order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
1154
- }],
1155
- /**
1156
- * Grid Template Columns
1157
- * @see https://tailwindcss.com/docs/grid-template-columns
1158
- */
1159
- "grid-cols": [{
1160
- "grid-cols": scaleGridTemplateColsRows()
1161
- }],
1162
- /**
1163
- * Grid Column Start / End
1164
- * @see https://tailwindcss.com/docs/grid-column
1165
- */
1166
- "col-start-end": [{
1167
- col: scaleGridColRowStartAndEnd()
1168
- }],
1169
- /**
1170
- * Grid Column Start
1171
- * @see https://tailwindcss.com/docs/grid-column
1172
- */
1173
- "col-start": [{
1174
- "col-start": scaleGridColRowStartOrEnd()
1175
- }],
1176
- /**
1177
- * Grid Column End
1178
- * @see https://tailwindcss.com/docs/grid-column
1179
- */
1180
- "col-end": [{
1181
- "col-end": scaleGridColRowStartOrEnd()
1182
- }],
1183
- /**
1184
- * Grid Template Rows
1185
- * @see https://tailwindcss.com/docs/grid-template-rows
1186
- */
1187
- "grid-rows": [{
1188
- "grid-rows": scaleGridTemplateColsRows()
1189
- }],
1190
- /**
1191
- * Grid Row Start / End
1192
- * @see https://tailwindcss.com/docs/grid-row
1193
- */
1194
- "row-start-end": [{
1195
- row: scaleGridColRowStartAndEnd()
1196
- }],
1197
- /**
1198
- * Grid Row Start
1199
- * @see https://tailwindcss.com/docs/grid-row
1200
- */
1201
- "row-start": [{
1202
- "row-start": scaleGridColRowStartOrEnd()
1203
- }],
1204
- /**
1205
- * Grid Row End
1206
- * @see https://tailwindcss.com/docs/grid-row
1207
- */
1208
- "row-end": [{
1209
- "row-end": scaleGridColRowStartOrEnd()
1210
- }],
1211
- /**
1212
- * Grid Auto Flow
1213
- * @see https://tailwindcss.com/docs/grid-auto-flow
1214
- */
1215
- "grid-flow": [{
1216
- "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
1217
- }],
1218
- /**
1219
- * Grid Auto Columns
1220
- * @see https://tailwindcss.com/docs/grid-auto-columns
1221
- */
1222
- "auto-cols": [{
1223
- "auto-cols": scaleGridAutoColsRows()
1224
- }],
1225
- /**
1226
- * Grid Auto Rows
1227
- * @see https://tailwindcss.com/docs/grid-auto-rows
1228
- */
1229
- "auto-rows": [{
1230
- "auto-rows": scaleGridAutoColsRows()
1231
- }],
1232
- /**
1233
- * Gap
1234
- * @see https://tailwindcss.com/docs/gap
1235
- */
1236
- gap: [{
1237
- gap: scaleUnambiguousSpacing()
1238
- }],
1239
- /**
1240
- * Gap X
1241
- * @see https://tailwindcss.com/docs/gap
1242
- */
1243
- "gap-x": [{
1244
- "gap-x": scaleUnambiguousSpacing()
1245
- }],
1246
- /**
1247
- * Gap Y
1248
- * @see https://tailwindcss.com/docs/gap
1249
- */
1250
- "gap-y": [{
1251
- "gap-y": scaleUnambiguousSpacing()
1252
- }],
1253
- /**
1254
- * Justify Content
1255
- * @see https://tailwindcss.com/docs/justify-content
1256
- */
1257
- "justify-content": [{
1258
- justify: [...scaleAlignPrimaryAxis(), "normal"]
1259
- }],
1260
- /**
1261
- * Justify Items
1262
- * @see https://tailwindcss.com/docs/justify-items
1263
- */
1264
- "justify-items": [{
1265
- "justify-items": [...scaleAlignSecondaryAxis(), "normal"]
1266
- }],
1267
- /**
1268
- * Justify Self
1269
- * @see https://tailwindcss.com/docs/justify-self
1270
- */
1271
- "justify-self": [{
1272
- "justify-self": ["auto", ...scaleAlignSecondaryAxis()]
1273
- }],
1274
- /**
1275
- * Align Content
1276
- * @see https://tailwindcss.com/docs/align-content
1277
- */
1278
- "align-content": [{
1279
- content: ["normal", ...scaleAlignPrimaryAxis()]
1280
- }],
1281
- /**
1282
- * Align Items
1283
- * @see https://tailwindcss.com/docs/align-items
1284
- */
1285
- "align-items": [{
1286
- items: [...scaleAlignSecondaryAxis(), {
1287
- baseline: ["", "last"]
1288
- }]
1289
- }],
1290
- /**
1291
- * Align Self
1292
- * @see https://tailwindcss.com/docs/align-self
1293
- */
1294
- "align-self": [{
1295
- self: ["auto", ...scaleAlignSecondaryAxis(), {
1296
- baseline: ["", "last"]
1297
- }]
1298
- }],
1299
- /**
1300
- * Place Content
1301
- * @see https://tailwindcss.com/docs/place-content
1302
- */
1303
- "place-content": [{
1304
- "place-content": scaleAlignPrimaryAxis()
1305
- }],
1306
- /**
1307
- * Place Items
1308
- * @see https://tailwindcss.com/docs/place-items
1309
- */
1310
- "place-items": [{
1311
- "place-items": [...scaleAlignSecondaryAxis(), "baseline"]
1312
- }],
1313
- /**
1314
- * Place Self
1315
- * @see https://tailwindcss.com/docs/place-self
1316
- */
1317
- "place-self": [{
1318
- "place-self": ["auto", ...scaleAlignSecondaryAxis()]
1319
- }],
1320
- // Spacing
1321
- /**
1322
- * Padding
1323
- * @see https://tailwindcss.com/docs/padding
1324
- */
1325
- p: [{
1326
- p: scaleUnambiguousSpacing()
1327
- }],
1328
- /**
1329
- * Padding X
1330
- * @see https://tailwindcss.com/docs/padding
1331
- */
1332
- px: [{
1333
- px: scaleUnambiguousSpacing()
1334
- }],
1335
- /**
1336
- * Padding Y
1337
- * @see https://tailwindcss.com/docs/padding
1338
- */
1339
- py: [{
1340
- py: scaleUnambiguousSpacing()
1341
- }],
1342
- /**
1343
- * Padding Start
1344
- * @see https://tailwindcss.com/docs/padding
1345
- */
1346
- ps: [{
1347
- ps: scaleUnambiguousSpacing()
1348
- }],
1349
- /**
1350
- * Padding End
1351
- * @see https://tailwindcss.com/docs/padding
1352
- */
1353
- pe: [{
1354
- pe: scaleUnambiguousSpacing()
1355
- }],
1356
- /**
1357
- * Padding Top
1358
- * @see https://tailwindcss.com/docs/padding
1359
- */
1360
- pt: [{
1361
- pt: scaleUnambiguousSpacing()
1362
- }],
1363
- /**
1364
- * Padding Right
1365
- * @see https://tailwindcss.com/docs/padding
1366
- */
1367
- pr: [{
1368
- pr: scaleUnambiguousSpacing()
1369
- }],
1370
- /**
1371
- * Padding Bottom
1372
- * @see https://tailwindcss.com/docs/padding
1373
- */
1374
- pb: [{
1375
- pb: scaleUnambiguousSpacing()
1376
- }],
1377
- /**
1378
- * Padding Left
1379
- * @see https://tailwindcss.com/docs/padding
1380
- */
1381
- pl: [{
1382
- pl: scaleUnambiguousSpacing()
1383
- }],
1384
- /**
1385
- * Margin
1386
- * @see https://tailwindcss.com/docs/margin
1387
- */
1388
- m: [{
1389
- m: scaleMargin()
1390
- }],
1391
- /**
1392
- * Margin X
1393
- * @see https://tailwindcss.com/docs/margin
1394
- */
1395
- mx: [{
1396
- mx: scaleMargin()
1397
- }],
1398
- /**
1399
- * Margin Y
1400
- * @see https://tailwindcss.com/docs/margin
1401
- */
1402
- my: [{
1403
- my: scaleMargin()
1404
- }],
1405
- /**
1406
- * Margin Start
1407
- * @see https://tailwindcss.com/docs/margin
1408
- */
1409
- ms: [{
1410
- ms: scaleMargin()
1411
- }],
1412
- /**
1413
- * Margin End
1414
- * @see https://tailwindcss.com/docs/margin
1415
- */
1416
- me: [{
1417
- me: scaleMargin()
1418
- }],
1419
- /**
1420
- * Margin Top
1421
- * @see https://tailwindcss.com/docs/margin
1422
- */
1423
- mt: [{
1424
- mt: scaleMargin()
1425
- }],
1426
- /**
1427
- * Margin Right
1428
- * @see https://tailwindcss.com/docs/margin
1429
- */
1430
- mr: [{
1431
- mr: scaleMargin()
1432
- }],
1433
- /**
1434
- * Margin Bottom
1435
- * @see https://tailwindcss.com/docs/margin
1436
- */
1437
- mb: [{
1438
- mb: scaleMargin()
1439
- }],
1440
- /**
1441
- * Margin Left
1442
- * @see https://tailwindcss.com/docs/margin
1443
- */
1444
- ml: [{
1445
- ml: scaleMargin()
1446
- }],
1447
- /**
1448
- * Space Between X
1449
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1450
- */
1451
- "space-x": [{
1452
- "space-x": scaleUnambiguousSpacing()
1453
- }],
1454
- /**
1455
- * Space Between X Reverse
1456
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1457
- */
1458
- "space-x-reverse": ["space-x-reverse"],
1459
- /**
1460
- * Space Between Y
1461
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1462
- */
1463
- "space-y": [{
1464
- "space-y": scaleUnambiguousSpacing()
1465
- }],
1466
- /**
1467
- * Space Between Y Reverse
1468
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
1469
- */
1470
- "space-y-reverse": ["space-y-reverse"],
1471
- // --------------
1472
- // --- Sizing ---
1473
- // --------------
1474
- /**
1475
- * Size
1476
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
1477
- */
1478
- size: [{
1479
- size: scaleSizing()
1480
- }],
1481
- /**
1482
- * Width
1483
- * @see https://tailwindcss.com/docs/width
1484
- */
1485
- w: [{
1486
- w: [themeContainer, "screen", ...scaleSizing()]
1487
- }],
1488
- /**
1489
- * Min-Width
1490
- * @see https://tailwindcss.com/docs/min-width
1491
- */
1492
- "min-w": [{
1493
- "min-w": [
1494
- themeContainer,
1495
- "screen",
1496
- /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1497
- "none",
1498
- ...scaleSizing()
1499
- ]
1500
- }],
1501
- /**
1502
- * Max-Width
1503
- * @see https://tailwindcss.com/docs/max-width
1504
- */
1505
- "max-w": [{
1506
- "max-w": [
1507
- themeContainer,
1508
- "screen",
1509
- "none",
1510
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1511
- "prose",
1512
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1513
- {
1514
- screen: [themeBreakpoint]
1515
- },
1516
- ...scaleSizing()
1517
- ]
1518
- }],
1519
- /**
1520
- * Height
1521
- * @see https://tailwindcss.com/docs/height
1522
- */
1523
- h: [{
1524
- h: ["screen", "lh", ...scaleSizing()]
1525
- }],
1526
- /**
1527
- * Min-Height
1528
- * @see https://tailwindcss.com/docs/min-height
1529
- */
1530
- "min-h": [{
1531
- "min-h": ["screen", "lh", "none", ...scaleSizing()]
1532
- }],
1533
- /**
1534
- * Max-Height
1535
- * @see https://tailwindcss.com/docs/max-height
1536
- */
1537
- "max-h": [{
1538
- "max-h": ["screen", "lh", ...scaleSizing()]
1539
- }],
1540
- // ------------------
1541
- // --- Typography ---
1542
- // ------------------
1543
- /**
1544
- * Font Size
1545
- * @see https://tailwindcss.com/docs/font-size
1546
- */
1547
- "font-size": [{
1548
- text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
1549
- }],
1550
- /**
1551
- * Font Smoothing
1552
- * @see https://tailwindcss.com/docs/font-smoothing
1553
- */
1554
- "font-smoothing": ["antialiased", "subpixel-antialiased"],
1555
- /**
1556
- * Font Style
1557
- * @see https://tailwindcss.com/docs/font-style
1558
- */
1559
- "font-style": ["italic", "not-italic"],
1560
- /**
1561
- * Font Weight
1562
- * @see https://tailwindcss.com/docs/font-weight
1563
- */
1564
- "font-weight": [{
1565
- font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
1566
- }],
1567
- /**
1568
- * Font Stretch
1569
- * @see https://tailwindcss.com/docs/font-stretch
1570
- */
1571
- "font-stretch": [{
1572
- "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", isPercent, isArbitraryValue]
1573
- }],
1574
- /**
1575
- * Font Family
1576
- * @see https://tailwindcss.com/docs/font-family
1577
- */
1578
- "font-family": [{
1579
- font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
1580
- }],
1581
- /**
1582
- * Font Variant Numeric
1583
- * @see https://tailwindcss.com/docs/font-variant-numeric
1584
- */
1585
- "fvn-normal": ["normal-nums"],
1586
- /**
1587
- * Font Variant Numeric
1588
- * @see https://tailwindcss.com/docs/font-variant-numeric
1589
- */
1590
- "fvn-ordinal": ["ordinal"],
1591
- /**
1592
- * Font Variant Numeric
1593
- * @see https://tailwindcss.com/docs/font-variant-numeric
1594
- */
1595
- "fvn-slashed-zero": ["slashed-zero"],
1596
- /**
1597
- * Font Variant Numeric
1598
- * @see https://tailwindcss.com/docs/font-variant-numeric
1599
- */
1600
- "fvn-figure": ["lining-nums", "oldstyle-nums"],
1601
- /**
1602
- * Font Variant Numeric
1603
- * @see https://tailwindcss.com/docs/font-variant-numeric
1604
- */
1605
- "fvn-spacing": ["proportional-nums", "tabular-nums"],
1606
- /**
1607
- * Font Variant Numeric
1608
- * @see https://tailwindcss.com/docs/font-variant-numeric
1609
- */
1610
- "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
1611
- /**
1612
- * Letter Spacing
1613
- * @see https://tailwindcss.com/docs/letter-spacing
1614
- */
1615
- tracking: [{
1616
- tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
1617
- }],
1618
- /**
1619
- * Line Clamp
1620
- * @see https://tailwindcss.com/docs/line-clamp
1621
- */
1622
- "line-clamp": [{
1623
- "line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
1624
- }],
1625
- /**
1626
- * Line Height
1627
- * @see https://tailwindcss.com/docs/line-height
1628
- */
1629
- leading: [{
1630
- leading: [
1631
- /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
1632
- themeLeading,
1633
- ...scaleUnambiguousSpacing()
1634
- ]
1635
- }],
1636
- /**
1637
- * List Style Image
1638
- * @see https://tailwindcss.com/docs/list-style-image
1639
- */
1640
- "list-image": [{
1641
- "list-image": ["none", isArbitraryVariable, isArbitraryValue]
1642
- }],
1643
- /**
1644
- * List Style Position
1645
- * @see https://tailwindcss.com/docs/list-style-position
1646
- */
1647
- "list-style-position": [{
1648
- list: ["inside", "outside"]
1649
- }],
1650
- /**
1651
- * List Style Type
1652
- * @see https://tailwindcss.com/docs/list-style-type
1653
- */
1654
- "list-style-type": [{
1655
- list: ["disc", "decimal", "none", isArbitraryVariable, isArbitraryValue]
1656
- }],
1657
- /**
1658
- * Text Alignment
1659
- * @see https://tailwindcss.com/docs/text-align
1660
- */
1661
- "text-alignment": [{
1662
- text: ["left", "center", "right", "justify", "start", "end"]
1663
- }],
1664
- /**
1665
- * Placeholder Color
1666
- * @deprecated since Tailwind CSS v3.0.0
1667
- * @see https://v3.tailwindcss.com/docs/placeholder-color
1668
- */
1669
- "placeholder-color": [{
1670
- placeholder: scaleColor()
1671
- }],
1672
- /**
1673
- * Text Color
1674
- * @see https://tailwindcss.com/docs/text-color
1675
- */
1676
- "text-color": [{
1677
- text: scaleColor()
1678
- }],
1679
- /**
1680
- * Text Decoration
1681
- * @see https://tailwindcss.com/docs/text-decoration
1682
- */
1683
- "text-decoration": ["underline", "overline", "line-through", "no-underline"],
1684
- /**
1685
- * Text Decoration Style
1686
- * @see https://tailwindcss.com/docs/text-decoration-style
1687
- */
1688
- "text-decoration-style": [{
1689
- decoration: [...scaleLineStyle(), "wavy"]
1690
- }],
1691
- /**
1692
- * Text Decoration Thickness
1693
- * @see https://tailwindcss.com/docs/text-decoration-thickness
1694
- */
1695
- "text-decoration-thickness": [{
1696
- decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
1697
- }],
1698
- /**
1699
- * Text Decoration Color
1700
- * @see https://tailwindcss.com/docs/text-decoration-color
1701
- */
1702
- "text-decoration-color": [{
1703
- decoration: scaleColor()
1704
- }],
1705
- /**
1706
- * Text Underline Offset
1707
- * @see https://tailwindcss.com/docs/text-underline-offset
1708
- */
1709
- "underline-offset": [{
1710
- "underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
1711
- }],
1712
- /**
1713
- * Text Transform
1714
- * @see https://tailwindcss.com/docs/text-transform
1715
- */
1716
- "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
1717
- /**
1718
- * Text Overflow
1719
- * @see https://tailwindcss.com/docs/text-overflow
1720
- */
1721
- "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
1722
- /**
1723
- * Text Wrap
1724
- * @see https://tailwindcss.com/docs/text-wrap
1725
- */
1726
- "text-wrap": [{
1727
- text: ["wrap", "nowrap", "balance", "pretty"]
1728
- }],
1729
- /**
1730
- * Text Indent
1731
- * @see https://tailwindcss.com/docs/text-indent
1732
- */
1733
- indent: [{
1734
- indent: scaleUnambiguousSpacing()
1735
- }],
1736
- /**
1737
- * Vertical Alignment
1738
- * @see https://tailwindcss.com/docs/vertical-align
1739
- */
1740
- "vertical-align": [{
1741
- align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
1742
- }],
1743
- /**
1744
- * Whitespace
1745
- * @see https://tailwindcss.com/docs/whitespace
1746
- */
1747
- whitespace: [{
1748
- whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
1749
- }],
1750
- /**
1751
- * Word Break
1752
- * @see https://tailwindcss.com/docs/word-break
1753
- */
1754
- break: [{
1755
- break: ["normal", "words", "all", "keep"]
1756
- }],
1757
- /**
1758
- * Overflow Wrap
1759
- * @see https://tailwindcss.com/docs/overflow-wrap
1760
- */
1761
- wrap: [{
1762
- wrap: ["break-word", "anywhere", "normal"]
1763
- }],
1764
- /**
1765
- * Hyphens
1766
- * @see https://tailwindcss.com/docs/hyphens
1767
- */
1768
- hyphens: [{
1769
- hyphens: ["none", "manual", "auto"]
1770
- }],
1771
- /**
1772
- * Content
1773
- * @see https://tailwindcss.com/docs/content
1774
- */
1775
- content: [{
1776
- content: ["none", isArbitraryVariable, isArbitraryValue]
1777
- }],
1778
- // -------------------
1779
- // --- Backgrounds ---
1780
- // -------------------
1781
- /**
1782
- * Background Attachment
1783
- * @see https://tailwindcss.com/docs/background-attachment
1784
- */
1785
- "bg-attachment": [{
1786
- bg: ["fixed", "local", "scroll"]
1787
- }],
1788
- /**
1789
- * Background Clip
1790
- * @see https://tailwindcss.com/docs/background-clip
1791
- */
1792
- "bg-clip": [{
1793
- "bg-clip": ["border", "padding", "content", "text"]
1794
- }],
1795
- /**
1796
- * Background Origin
1797
- * @see https://tailwindcss.com/docs/background-origin
1798
- */
1799
- "bg-origin": [{
1800
- "bg-origin": ["border", "padding", "content"]
1801
- }],
1802
- /**
1803
- * Background Position
1804
- * @see https://tailwindcss.com/docs/background-position
1805
- */
1806
- "bg-position": [{
1807
- bg: scaleBgPosition()
1808
- }],
1809
- /**
1810
- * Background Repeat
1811
- * @see https://tailwindcss.com/docs/background-repeat
1812
- */
1813
- "bg-repeat": [{
1814
- bg: scaleBgRepeat()
1815
- }],
1816
- /**
1817
- * Background Size
1818
- * @see https://tailwindcss.com/docs/background-size
1819
- */
1820
- "bg-size": [{
1821
- bg: scaleBgSize()
1822
- }],
1823
- /**
1824
- * Background Image
1825
- * @see https://tailwindcss.com/docs/background-image
1826
- */
1827
- "bg-image": [{
1828
- bg: ["none", {
1829
- linear: [{
1830
- to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
1831
- }, isInteger, isArbitraryVariable, isArbitraryValue],
1832
- radial: ["", isArbitraryVariable, isArbitraryValue],
1833
- conic: [isInteger, isArbitraryVariable, isArbitraryValue]
1834
- }, isArbitraryVariableImage, isArbitraryImage]
1835
- }],
1836
- /**
1837
- * Background Color
1838
- * @see https://tailwindcss.com/docs/background-color
1839
- */
1840
- "bg-color": [{
1841
- bg: scaleColor()
1842
- }],
1843
- /**
1844
- * Gradient Color Stops From Position
1845
- * @see https://tailwindcss.com/docs/gradient-color-stops
1846
- */
1847
- "gradient-from-pos": [{
1848
- from: scaleGradientStopPosition()
1849
- }],
1850
- /**
1851
- * Gradient Color Stops Via Position
1852
- * @see https://tailwindcss.com/docs/gradient-color-stops
1853
- */
1854
- "gradient-via-pos": [{
1855
- via: scaleGradientStopPosition()
1856
- }],
1857
- /**
1858
- * Gradient Color Stops To Position
1859
- * @see https://tailwindcss.com/docs/gradient-color-stops
1860
- */
1861
- "gradient-to-pos": [{
1862
- to: scaleGradientStopPosition()
1863
- }],
1864
- /**
1865
- * Gradient Color Stops From
1866
- * @see https://tailwindcss.com/docs/gradient-color-stops
1867
- */
1868
- "gradient-from": [{
1869
- from: scaleColor()
1870
- }],
1871
- /**
1872
- * Gradient Color Stops Via
1873
- * @see https://tailwindcss.com/docs/gradient-color-stops
1874
- */
1875
- "gradient-via": [{
1876
- via: scaleColor()
1877
- }],
1878
- /**
1879
- * Gradient Color Stops To
1880
- * @see https://tailwindcss.com/docs/gradient-color-stops
1881
- */
1882
- "gradient-to": [{
1883
- to: scaleColor()
1884
- }],
1885
- // ---------------
1886
- // --- Borders ---
1887
- // ---------------
1888
- /**
1889
- * Border Radius
1890
- * @see https://tailwindcss.com/docs/border-radius
1891
- */
1892
- rounded: [{
1893
- rounded: scaleRadius()
1894
- }],
1895
- /**
1896
- * Border Radius Start
1897
- * @see https://tailwindcss.com/docs/border-radius
1898
- */
1899
- "rounded-s": [{
1900
- "rounded-s": scaleRadius()
1901
- }],
1902
- /**
1903
- * Border Radius End
1904
- * @see https://tailwindcss.com/docs/border-radius
1905
- */
1906
- "rounded-e": [{
1907
- "rounded-e": scaleRadius()
1908
- }],
1909
- /**
1910
- * Border Radius Top
1911
- * @see https://tailwindcss.com/docs/border-radius
1912
- */
1913
- "rounded-t": [{
1914
- "rounded-t": scaleRadius()
1915
- }],
1916
- /**
1917
- * Border Radius Right
1918
- * @see https://tailwindcss.com/docs/border-radius
1919
- */
1920
- "rounded-r": [{
1921
- "rounded-r": scaleRadius()
1922
- }],
1923
- /**
1924
- * Border Radius Bottom
1925
- * @see https://tailwindcss.com/docs/border-radius
1926
- */
1927
- "rounded-b": [{
1928
- "rounded-b": scaleRadius()
1929
- }],
1930
- /**
1931
- * Border Radius Left
1932
- * @see https://tailwindcss.com/docs/border-radius
1933
- */
1934
- "rounded-l": [{
1935
- "rounded-l": scaleRadius()
1936
- }],
1937
- /**
1938
- * Border Radius Start Start
1939
- * @see https://tailwindcss.com/docs/border-radius
1940
- */
1941
- "rounded-ss": [{
1942
- "rounded-ss": scaleRadius()
1943
- }],
1944
- /**
1945
- * Border Radius Start End
1946
- * @see https://tailwindcss.com/docs/border-radius
1947
- */
1948
- "rounded-se": [{
1949
- "rounded-se": scaleRadius()
1950
- }],
1951
- /**
1952
- * Border Radius End End
1953
- * @see https://tailwindcss.com/docs/border-radius
1954
- */
1955
- "rounded-ee": [{
1956
- "rounded-ee": scaleRadius()
1957
- }],
1958
- /**
1959
- * Border Radius End Start
1960
- * @see https://tailwindcss.com/docs/border-radius
1961
- */
1962
- "rounded-es": [{
1963
- "rounded-es": scaleRadius()
1964
- }],
1965
- /**
1966
- * Border Radius Top Left
1967
- * @see https://tailwindcss.com/docs/border-radius
1968
- */
1969
- "rounded-tl": [{
1970
- "rounded-tl": scaleRadius()
1971
- }],
1972
- /**
1973
- * Border Radius Top Right
1974
- * @see https://tailwindcss.com/docs/border-radius
1975
- */
1976
- "rounded-tr": [{
1977
- "rounded-tr": scaleRadius()
1978
- }],
1979
- /**
1980
- * Border Radius Bottom Right
1981
- * @see https://tailwindcss.com/docs/border-radius
1982
- */
1983
- "rounded-br": [{
1984
- "rounded-br": scaleRadius()
1985
- }],
1986
- /**
1987
- * Border Radius Bottom Left
1988
- * @see https://tailwindcss.com/docs/border-radius
1989
- */
1990
- "rounded-bl": [{
1991
- "rounded-bl": scaleRadius()
1992
- }],
1993
- /**
1994
- * Border Width
1995
- * @see https://tailwindcss.com/docs/border-width
1996
- */
1997
- "border-w": [{
1998
- border: scaleBorderWidth()
1999
- }],
2000
- /**
2001
- * Border Width X
2002
- * @see https://tailwindcss.com/docs/border-width
2003
- */
2004
- "border-w-x": [{
2005
- "border-x": scaleBorderWidth()
2006
- }],
2007
- /**
2008
- * Border Width Y
2009
- * @see https://tailwindcss.com/docs/border-width
2010
- */
2011
- "border-w-y": [{
2012
- "border-y": scaleBorderWidth()
2013
- }],
2014
- /**
2015
- * Border Width Start
2016
- * @see https://tailwindcss.com/docs/border-width
2017
- */
2018
- "border-w-s": [{
2019
- "border-s": scaleBorderWidth()
2020
- }],
2021
- /**
2022
- * Border Width End
2023
- * @see https://tailwindcss.com/docs/border-width
2024
- */
2025
- "border-w-e": [{
2026
- "border-e": scaleBorderWidth()
2027
- }],
2028
- /**
2029
- * Border Width Top
2030
- * @see https://tailwindcss.com/docs/border-width
2031
- */
2032
- "border-w-t": [{
2033
- "border-t": scaleBorderWidth()
2034
- }],
2035
- /**
2036
- * Border Width Right
2037
- * @see https://tailwindcss.com/docs/border-width
2038
- */
2039
- "border-w-r": [{
2040
- "border-r": scaleBorderWidth()
2041
- }],
2042
- /**
2043
- * Border Width Bottom
2044
- * @see https://tailwindcss.com/docs/border-width
2045
- */
2046
- "border-w-b": [{
2047
- "border-b": scaleBorderWidth()
2048
- }],
2049
- /**
2050
- * Border Width Left
2051
- * @see https://tailwindcss.com/docs/border-width
2052
- */
2053
- "border-w-l": [{
2054
- "border-l": scaleBorderWidth()
2055
- }],
2056
- /**
2057
- * Divide Width X
2058
- * @see https://tailwindcss.com/docs/border-width#between-children
2059
- */
2060
- "divide-x": [{
2061
- "divide-x": scaleBorderWidth()
2062
- }],
2063
- /**
2064
- * Divide Width X Reverse
2065
- * @see https://tailwindcss.com/docs/border-width#between-children
2066
- */
2067
- "divide-x-reverse": ["divide-x-reverse"],
2068
- /**
2069
- * Divide Width Y
2070
- * @see https://tailwindcss.com/docs/border-width#between-children
2071
- */
2072
- "divide-y": [{
2073
- "divide-y": scaleBorderWidth()
2074
- }],
2075
- /**
2076
- * Divide Width Y Reverse
2077
- * @see https://tailwindcss.com/docs/border-width#between-children
2078
- */
2079
- "divide-y-reverse": ["divide-y-reverse"],
2080
- /**
2081
- * Border Style
2082
- * @see https://tailwindcss.com/docs/border-style
2083
- */
2084
- "border-style": [{
2085
- border: [...scaleLineStyle(), "hidden", "none"]
2086
- }],
2087
- /**
2088
- * Divide Style
2089
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
2090
- */
2091
- "divide-style": [{
2092
- divide: [...scaleLineStyle(), "hidden", "none"]
2093
- }],
2094
- /**
2095
- * Border Color
2096
- * @see https://tailwindcss.com/docs/border-color
2097
- */
2098
- "border-color": [{
2099
- border: scaleColor()
2100
- }],
2101
- /**
2102
- * Border Color X
2103
- * @see https://tailwindcss.com/docs/border-color
2104
- */
2105
- "border-color-x": [{
2106
- "border-x": scaleColor()
2107
- }],
2108
- /**
2109
- * Border Color Y
2110
- * @see https://tailwindcss.com/docs/border-color
2111
- */
2112
- "border-color-y": [{
2113
- "border-y": scaleColor()
2114
- }],
2115
- /**
2116
- * Border Color S
2117
- * @see https://tailwindcss.com/docs/border-color
2118
- */
2119
- "border-color-s": [{
2120
- "border-s": scaleColor()
2121
- }],
2122
- /**
2123
- * Border Color E
2124
- * @see https://tailwindcss.com/docs/border-color
2125
- */
2126
- "border-color-e": [{
2127
- "border-e": scaleColor()
2128
- }],
2129
- /**
2130
- * Border Color Top
2131
- * @see https://tailwindcss.com/docs/border-color
2132
- */
2133
- "border-color-t": [{
2134
- "border-t": scaleColor()
2135
- }],
2136
- /**
2137
- * Border Color Right
2138
- * @see https://tailwindcss.com/docs/border-color
2139
- */
2140
- "border-color-r": [{
2141
- "border-r": scaleColor()
2142
- }],
2143
- /**
2144
- * Border Color Bottom
2145
- * @see https://tailwindcss.com/docs/border-color
2146
- */
2147
- "border-color-b": [{
2148
- "border-b": scaleColor()
2149
- }],
2150
- /**
2151
- * Border Color Left
2152
- * @see https://tailwindcss.com/docs/border-color
2153
- */
2154
- "border-color-l": [{
2155
- "border-l": scaleColor()
2156
- }],
2157
- /**
2158
- * Divide Color
2159
- * @see https://tailwindcss.com/docs/divide-color
2160
- */
2161
- "divide-color": [{
2162
- divide: scaleColor()
2163
- }],
2164
- /**
2165
- * Outline Style
2166
- * @see https://tailwindcss.com/docs/outline-style
2167
- */
2168
- "outline-style": [{
2169
- outline: [...scaleLineStyle(), "none", "hidden"]
2170
- }],
2171
- /**
2172
- * Outline Offset
2173
- * @see https://tailwindcss.com/docs/outline-offset
2174
- */
2175
- "outline-offset": [{
2176
- "outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
2177
- }],
2178
- /**
2179
- * Outline Width
2180
- * @see https://tailwindcss.com/docs/outline-width
2181
- */
2182
- "outline-w": [{
2183
- outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
2184
- }],
2185
- /**
2186
- * Outline Color
2187
- * @see https://tailwindcss.com/docs/outline-color
2188
- */
2189
- "outline-color": [{
2190
- outline: scaleColor()
2191
- }],
2192
- // ---------------
2193
- // --- Effects ---
2194
- // ---------------
2195
- /**
2196
- * Box Shadow
2197
- * @see https://tailwindcss.com/docs/box-shadow
2198
- */
2199
- shadow: [{
2200
- shadow: [
2201
- // Deprecated since Tailwind CSS v4.0.0
2202
- "",
2203
- "none",
2204
- themeShadow,
2205
- isArbitraryVariableShadow,
2206
- isArbitraryShadow
2207
- ]
2208
- }],
2209
- /**
2210
- * Box Shadow Color
2211
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
2212
- */
2213
- "shadow-color": [{
2214
- shadow: scaleColor()
2215
- }],
2216
- /**
2217
- * Inset Box Shadow
2218
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
2219
- */
2220
- "inset-shadow": [{
2221
- "inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
2222
- }],
2223
- /**
2224
- * Inset Box Shadow Color
2225
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
2226
- */
2227
- "inset-shadow-color": [{
2228
- "inset-shadow": scaleColor()
2229
- }],
2230
- /**
2231
- * Ring Width
2232
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
2233
- */
2234
- "ring-w": [{
2235
- ring: scaleBorderWidth()
2236
- }],
2237
- /**
2238
- * Ring Width Inset
2239
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
2240
- * @deprecated since Tailwind CSS v4.0.0
2241
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2242
- */
2243
- "ring-w-inset": ["ring-inset"],
2244
- /**
2245
- * Ring Color
2246
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
2247
- */
2248
- "ring-color": [{
2249
- ring: scaleColor()
2250
- }],
2251
- /**
2252
- * Ring Offset Width
2253
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
2254
- * @deprecated since Tailwind CSS v4.0.0
2255
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2256
- */
2257
- "ring-offset-w": [{
2258
- "ring-offset": [isNumber, isArbitraryLength]
2259
- }],
2260
- /**
2261
- * Ring Offset Color
2262
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
2263
- * @deprecated since Tailwind CSS v4.0.0
2264
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
2265
- */
2266
- "ring-offset-color": [{
2267
- "ring-offset": scaleColor()
2268
- }],
2269
- /**
2270
- * Inset Ring Width
2271
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
2272
- */
2273
- "inset-ring-w": [{
2274
- "inset-ring": scaleBorderWidth()
2275
- }],
2276
- /**
2277
- * Inset Ring Color
2278
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
2279
- */
2280
- "inset-ring-color": [{
2281
- "inset-ring": scaleColor()
2282
- }],
2283
- /**
2284
- * Text Shadow
2285
- * @see https://tailwindcss.com/docs/text-shadow
2286
- */
2287
- "text-shadow": [{
2288
- "text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
2289
- }],
2290
- /**
2291
- * Text Shadow Color
2292
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
2293
- */
2294
- "text-shadow-color": [{
2295
- "text-shadow": scaleColor()
2296
- }],
2297
- /**
2298
- * Opacity
2299
- * @see https://tailwindcss.com/docs/opacity
2300
- */
2301
- opacity: [{
2302
- opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
2303
- }],
2304
- /**
2305
- * Mix Blend Mode
2306
- * @see https://tailwindcss.com/docs/mix-blend-mode
2307
- */
2308
- "mix-blend": [{
2309
- "mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
2310
- }],
2311
- /**
2312
- * Background Blend Mode
2313
- * @see https://tailwindcss.com/docs/background-blend-mode
2314
- */
2315
- "bg-blend": [{
2316
- "bg-blend": scaleBlendMode()
2317
- }],
2318
- /**
2319
- * Mask Clip
2320
- * @see https://tailwindcss.com/docs/mask-clip
2321
- */
2322
- "mask-clip": [{
2323
- "mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
2324
- }, "mask-no-clip"],
2325
- /**
2326
- * Mask Composite
2327
- * @see https://tailwindcss.com/docs/mask-composite
2328
- */
2329
- "mask-composite": [{
2330
- mask: ["add", "subtract", "intersect", "exclude"]
2331
- }],
2332
- /**
2333
- * Mask Image
2334
- * @see https://tailwindcss.com/docs/mask-image
2335
- */
2336
- "mask-image-linear-pos": [{
2337
- "mask-linear": [isNumber]
2338
- }],
2339
- "mask-image-linear-from-pos": [{
2340
- "mask-linear-from": scaleMaskImagePosition()
2341
- }],
2342
- "mask-image-linear-to-pos": [{
2343
- "mask-linear-to": scaleMaskImagePosition()
2344
- }],
2345
- "mask-image-linear-from-color": [{
2346
- "mask-linear-from": scaleColor()
2347
- }],
2348
- "mask-image-linear-to-color": [{
2349
- "mask-linear-to": scaleColor()
2350
- }],
2351
- "mask-image-t-from-pos": [{
2352
- "mask-t-from": scaleMaskImagePosition()
2353
- }],
2354
- "mask-image-t-to-pos": [{
2355
- "mask-t-to": scaleMaskImagePosition()
2356
- }],
2357
- "mask-image-t-from-color": [{
2358
- "mask-t-from": scaleColor()
2359
- }],
2360
- "mask-image-t-to-color": [{
2361
- "mask-t-to": scaleColor()
2362
- }],
2363
- "mask-image-r-from-pos": [{
2364
- "mask-r-from": scaleMaskImagePosition()
2365
- }],
2366
- "mask-image-r-to-pos": [{
2367
- "mask-r-to": scaleMaskImagePosition()
2368
- }],
2369
- "mask-image-r-from-color": [{
2370
- "mask-r-from": scaleColor()
2371
- }],
2372
- "mask-image-r-to-color": [{
2373
- "mask-r-to": scaleColor()
2374
- }],
2375
- "mask-image-b-from-pos": [{
2376
- "mask-b-from": scaleMaskImagePosition()
2377
- }],
2378
- "mask-image-b-to-pos": [{
2379
- "mask-b-to": scaleMaskImagePosition()
2380
- }],
2381
- "mask-image-b-from-color": [{
2382
- "mask-b-from": scaleColor()
2383
- }],
2384
- "mask-image-b-to-color": [{
2385
- "mask-b-to": scaleColor()
2386
- }],
2387
- "mask-image-l-from-pos": [{
2388
- "mask-l-from": scaleMaskImagePosition()
2389
- }],
2390
- "mask-image-l-to-pos": [{
2391
- "mask-l-to": scaleMaskImagePosition()
2392
- }],
2393
- "mask-image-l-from-color": [{
2394
- "mask-l-from": scaleColor()
2395
- }],
2396
- "mask-image-l-to-color": [{
2397
- "mask-l-to": scaleColor()
2398
- }],
2399
- "mask-image-x-from-pos": [{
2400
- "mask-x-from": scaleMaskImagePosition()
2401
- }],
2402
- "mask-image-x-to-pos": [{
2403
- "mask-x-to": scaleMaskImagePosition()
2404
- }],
2405
- "mask-image-x-from-color": [{
2406
- "mask-x-from": scaleColor()
2407
- }],
2408
- "mask-image-x-to-color": [{
2409
- "mask-x-to": scaleColor()
2410
- }],
2411
- "mask-image-y-from-pos": [{
2412
- "mask-y-from": scaleMaskImagePosition()
2413
- }],
2414
- "mask-image-y-to-pos": [{
2415
- "mask-y-to": scaleMaskImagePosition()
2416
- }],
2417
- "mask-image-y-from-color": [{
2418
- "mask-y-from": scaleColor()
2419
- }],
2420
- "mask-image-y-to-color": [{
2421
- "mask-y-to": scaleColor()
2422
- }],
2423
- "mask-image-radial": [{
2424
- "mask-radial": [isArbitraryVariable, isArbitraryValue]
2425
- }],
2426
- "mask-image-radial-from-pos": [{
2427
- "mask-radial-from": scaleMaskImagePosition()
2428
- }],
2429
- "mask-image-radial-to-pos": [{
2430
- "mask-radial-to": scaleMaskImagePosition()
2431
- }],
2432
- "mask-image-radial-from-color": [{
2433
- "mask-radial-from": scaleColor()
2434
- }],
2435
- "mask-image-radial-to-color": [{
2436
- "mask-radial-to": scaleColor()
2437
- }],
2438
- "mask-image-radial-shape": [{
2439
- "mask-radial": ["circle", "ellipse"]
2440
- }],
2441
- "mask-image-radial-size": [{
2442
- "mask-radial": [{
2443
- closest: ["side", "corner"],
2444
- farthest: ["side", "corner"]
2445
- }]
2446
- }],
2447
- "mask-image-radial-pos": [{
2448
- "mask-radial-at": scalePosition()
2449
- }],
2450
- "mask-image-conic-pos": [{
2451
- "mask-conic": [isNumber]
2452
- }],
2453
- "mask-image-conic-from-pos": [{
2454
- "mask-conic-from": scaleMaskImagePosition()
2455
- }],
2456
- "mask-image-conic-to-pos": [{
2457
- "mask-conic-to": scaleMaskImagePosition()
2458
- }],
2459
- "mask-image-conic-from-color": [{
2460
- "mask-conic-from": scaleColor()
2461
- }],
2462
- "mask-image-conic-to-color": [{
2463
- "mask-conic-to": scaleColor()
2464
- }],
2465
- /**
2466
- * Mask Mode
2467
- * @see https://tailwindcss.com/docs/mask-mode
2468
- */
2469
- "mask-mode": [{
2470
- mask: ["alpha", "luminance", "match"]
2471
- }],
2472
- /**
2473
- * Mask Origin
2474
- * @see https://tailwindcss.com/docs/mask-origin
2475
- */
2476
- "mask-origin": [{
2477
- "mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
2478
- }],
2479
- /**
2480
- * Mask Position
2481
- * @see https://tailwindcss.com/docs/mask-position
2482
- */
2483
- "mask-position": [{
2484
- mask: scaleBgPosition()
2485
- }],
2486
- /**
2487
- * Mask Repeat
2488
- * @see https://tailwindcss.com/docs/mask-repeat
2489
- */
2490
- "mask-repeat": [{
2491
- mask: scaleBgRepeat()
2492
- }],
2493
- /**
2494
- * Mask Size
2495
- * @see https://tailwindcss.com/docs/mask-size
2496
- */
2497
- "mask-size": [{
2498
- mask: scaleBgSize()
2499
- }],
2500
- /**
2501
- * Mask Type
2502
- * @see https://tailwindcss.com/docs/mask-type
2503
- */
2504
- "mask-type": [{
2505
- "mask-type": ["alpha", "luminance"]
2506
- }],
2507
- /**
2508
- * Mask Image
2509
- * @see https://tailwindcss.com/docs/mask-image
2510
- */
2511
- "mask-image": [{
2512
- mask: ["none", isArbitraryVariable, isArbitraryValue]
2513
- }],
2514
- // ---------------
2515
- // --- Filters ---
2516
- // ---------------
2517
- /**
2518
- * Filter
2519
- * @see https://tailwindcss.com/docs/filter
2520
- */
2521
- filter: [{
2522
- filter: [
2523
- // Deprecated since Tailwind CSS v3.0.0
2524
- "",
2525
- "none",
2526
- isArbitraryVariable,
2527
- isArbitraryValue
2528
- ]
2529
- }],
2530
- /**
2531
- * Blur
2532
- * @see https://tailwindcss.com/docs/blur
2533
- */
2534
- blur: [{
2535
- blur: scaleBlur()
2536
- }],
2537
- /**
2538
- * Brightness
2539
- * @see https://tailwindcss.com/docs/brightness
2540
- */
2541
- brightness: [{
2542
- brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
2543
- }],
2544
- /**
2545
- * Contrast
2546
- * @see https://tailwindcss.com/docs/contrast
2547
- */
2548
- contrast: [{
2549
- contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
2550
- }],
2551
- /**
2552
- * Drop Shadow
2553
- * @see https://tailwindcss.com/docs/drop-shadow
2554
- */
2555
- "drop-shadow": [{
2556
- "drop-shadow": [
2557
- // Deprecated since Tailwind CSS v4.0.0
2558
- "",
2559
- "none",
2560
- themeDropShadow,
2561
- isArbitraryVariableShadow,
2562
- isArbitraryShadow
2563
- ]
2564
- }],
2565
- /**
2566
- * Drop Shadow Color
2567
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
2568
- */
2569
- "drop-shadow-color": [{
2570
- "drop-shadow": scaleColor()
2571
- }],
2572
- /**
2573
- * Grayscale
2574
- * @see https://tailwindcss.com/docs/grayscale
2575
- */
2576
- grayscale: [{
2577
- grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2578
- }],
2579
- /**
2580
- * Hue Rotate
2581
- * @see https://tailwindcss.com/docs/hue-rotate
2582
- */
2583
- "hue-rotate": [{
2584
- "hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
2585
- }],
2586
- /**
2587
- * Invert
2588
- * @see https://tailwindcss.com/docs/invert
2589
- */
2590
- invert: [{
2591
- invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2592
- }],
2593
- /**
2594
- * Saturate
2595
- * @see https://tailwindcss.com/docs/saturate
2596
- */
2597
- saturate: [{
2598
- saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
2599
- }],
2600
- /**
2601
- * Sepia
2602
- * @see https://tailwindcss.com/docs/sepia
2603
- */
2604
- sepia: [{
2605
- sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
2606
- }],
2607
- /**
2608
- * Backdrop Filter
2609
- * @see https://tailwindcss.com/docs/backdrop-filter
2610
- */
2611
- "backdrop-filter": [{
2612
- "backdrop-filter": [
2613
- // Deprecated since Tailwind CSS v3.0.0
2614
- "",
2615
- "none",
2616
- isArbitraryVariable,
2617
- isArbitraryValue
2618
- ]
2619
- }],
2620
- /**
2621
- * Backdrop Blur
2622
- * @see https://tailwindcss.com/docs/backdrop-blur
2623
- */
2624
- "backdrop-blur": [{
2625
- "backdrop-blur": scaleBlur()
2626
- }],
2627
- /**
2628
- * Backdrop Brightness
2629
- * @see https://tailwindcss.com/docs/backdrop-brightness
2630
- */
2631
- "backdrop-brightness": [{
2632
- "backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
2633
- }],
2634
- /**
2635
- * Backdrop Contrast
2636
- * @see https://tailwindcss.com/docs/backdrop-contrast
2637
- */
2638
- "backdrop-contrast": [{
2639
- "backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
2640
- }],
2641
- /**
2642
- * Backdrop Grayscale
2643
- * @see https://tailwindcss.com/docs/backdrop-grayscale
2644
- */
2645
- "backdrop-grayscale": [{
2646
- "backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2647
- }],
2648
- /**
2649
- * Backdrop Hue Rotate
2650
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
2651
- */
2652
- "backdrop-hue-rotate": [{
2653
- "backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
2654
- }],
2655
- /**
2656
- * Backdrop Invert
2657
- * @see https://tailwindcss.com/docs/backdrop-invert
2658
- */
2659
- "backdrop-invert": [{
2660
- "backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2661
- }],
2662
- /**
2663
- * Backdrop Opacity
2664
- * @see https://tailwindcss.com/docs/backdrop-opacity
2665
- */
2666
- "backdrop-opacity": [{
2667
- "backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
2668
- }],
2669
- /**
2670
- * Backdrop Saturate
2671
- * @see https://tailwindcss.com/docs/backdrop-saturate
2672
- */
2673
- "backdrop-saturate": [{
2674
- "backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
2675
- }],
2676
- /**
2677
- * Backdrop Sepia
2678
- * @see https://tailwindcss.com/docs/backdrop-sepia
2679
- */
2680
- "backdrop-sepia": [{
2681
- "backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
2682
- }],
2683
- // --------------
2684
- // --- Tables ---
2685
- // --------------
2686
- /**
2687
- * Border Collapse
2688
- * @see https://tailwindcss.com/docs/border-collapse
2689
- */
2690
- "border-collapse": [{
2691
- border: ["collapse", "separate"]
2692
- }],
2693
- /**
2694
- * Border Spacing
2695
- * @see https://tailwindcss.com/docs/border-spacing
2696
- */
2697
- "border-spacing": [{
2698
- "border-spacing": scaleUnambiguousSpacing()
2699
- }],
2700
- /**
2701
- * Border Spacing X
2702
- * @see https://tailwindcss.com/docs/border-spacing
2703
- */
2704
- "border-spacing-x": [{
2705
- "border-spacing-x": scaleUnambiguousSpacing()
2706
- }],
2707
- /**
2708
- * Border Spacing Y
2709
- * @see https://tailwindcss.com/docs/border-spacing
2710
- */
2711
- "border-spacing-y": [{
2712
- "border-spacing-y": scaleUnambiguousSpacing()
2713
- }],
2714
- /**
2715
- * Table Layout
2716
- * @see https://tailwindcss.com/docs/table-layout
2717
- */
2718
- "table-layout": [{
2719
- table: ["auto", "fixed"]
2720
- }],
2721
- /**
2722
- * Caption Side
2723
- * @see https://tailwindcss.com/docs/caption-side
2724
- */
2725
- caption: [{
2726
- caption: ["top", "bottom"]
2727
- }],
2728
- // ---------------------------------
2729
- // --- Transitions and Animation ---
2730
- // ---------------------------------
2731
- /**
2732
- * Transition Property
2733
- * @see https://tailwindcss.com/docs/transition-property
2734
- */
2735
- transition: [{
2736
- transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
2737
- }],
2738
- /**
2739
- * Transition Behavior
2740
- * @see https://tailwindcss.com/docs/transition-behavior
2741
- */
2742
- "transition-behavior": [{
2743
- transition: ["normal", "discrete"]
2744
- }],
2745
- /**
2746
- * Transition Duration
2747
- * @see https://tailwindcss.com/docs/transition-duration
2748
- */
2749
- duration: [{
2750
- duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
2751
- }],
2752
- /**
2753
- * Transition Timing Function
2754
- * @see https://tailwindcss.com/docs/transition-timing-function
2755
- */
2756
- ease: [{
2757
- ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
2758
- }],
2759
- /**
2760
- * Transition Delay
2761
- * @see https://tailwindcss.com/docs/transition-delay
2762
- */
2763
- delay: [{
2764
- delay: [isNumber, isArbitraryVariable, isArbitraryValue]
2765
- }],
2766
- /**
2767
- * Animation
2768
- * @see https://tailwindcss.com/docs/animation
2769
- */
2770
- animate: [{
2771
- animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
2772
- }],
2773
- // ------------------
2774
- // --- Transforms ---
2775
- // ------------------
2776
- /**
2777
- * Backface Visibility
2778
- * @see https://tailwindcss.com/docs/backface-visibility
2779
- */
2780
- backface: [{
2781
- backface: ["hidden", "visible"]
2782
- }],
2783
- /**
2784
- * Perspective
2785
- * @see https://tailwindcss.com/docs/perspective
2786
- */
2787
- perspective: [{
2788
- perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
2789
- }],
2790
- /**
2791
- * Perspective Origin
2792
- * @see https://tailwindcss.com/docs/perspective-origin
2793
- */
2794
- "perspective-origin": [{
2795
- "perspective-origin": scalePositionWithArbitrary()
2796
- }],
2797
- /**
2798
- * Rotate
2799
- * @see https://tailwindcss.com/docs/rotate
2800
- */
2801
- rotate: [{
2802
- rotate: scaleRotate()
2803
- }],
2804
- /**
2805
- * Rotate X
2806
- * @see https://tailwindcss.com/docs/rotate
2807
- */
2808
- "rotate-x": [{
2809
- "rotate-x": scaleRotate()
2810
- }],
2811
- /**
2812
- * Rotate Y
2813
- * @see https://tailwindcss.com/docs/rotate
2814
- */
2815
- "rotate-y": [{
2816
- "rotate-y": scaleRotate()
2817
- }],
2818
- /**
2819
- * Rotate Z
2820
- * @see https://tailwindcss.com/docs/rotate
2821
- */
2822
- "rotate-z": [{
2823
- "rotate-z": scaleRotate()
2824
- }],
2825
- /**
2826
- * Scale
2827
- * @see https://tailwindcss.com/docs/scale
2828
- */
2829
- scale: [{
2830
- scale: scaleScale()
2831
- }],
2832
- /**
2833
- * Scale X
2834
- * @see https://tailwindcss.com/docs/scale
2835
- */
2836
- "scale-x": [{
2837
- "scale-x": scaleScale()
2838
- }],
2839
- /**
2840
- * Scale Y
2841
- * @see https://tailwindcss.com/docs/scale
2842
- */
2843
- "scale-y": [{
2844
- "scale-y": scaleScale()
2845
- }],
2846
- /**
2847
- * Scale Z
2848
- * @see https://tailwindcss.com/docs/scale
2849
- */
2850
- "scale-z": [{
2851
- "scale-z": scaleScale()
2852
- }],
2853
- /**
2854
- * Scale 3D
2855
- * @see https://tailwindcss.com/docs/scale
2856
- */
2857
- "scale-3d": ["scale-3d"],
2858
- /**
2859
- * Skew
2860
- * @see https://tailwindcss.com/docs/skew
2861
- */
2862
- skew: [{
2863
- skew: scaleSkew()
2864
- }],
2865
- /**
2866
- * Skew X
2867
- * @see https://tailwindcss.com/docs/skew
2868
- */
2869
- "skew-x": [{
2870
- "skew-x": scaleSkew()
2871
- }],
2872
- /**
2873
- * Skew Y
2874
- * @see https://tailwindcss.com/docs/skew
2875
- */
2876
- "skew-y": [{
2877
- "skew-y": scaleSkew()
2878
- }],
2879
- /**
2880
- * Transform
2881
- * @see https://tailwindcss.com/docs/transform
2882
- */
2883
- transform: [{
2884
- transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
2885
- }],
2886
- /**
2887
- * Transform Origin
2888
- * @see https://tailwindcss.com/docs/transform-origin
2889
- */
2890
- "transform-origin": [{
2891
- origin: scalePositionWithArbitrary()
2892
- }],
2893
- /**
2894
- * Transform Style
2895
- * @see https://tailwindcss.com/docs/transform-style
2896
- */
2897
- "transform-style": [{
2898
- transform: ["3d", "flat"]
2899
- }],
2900
- /**
2901
- * Translate
2902
- * @see https://tailwindcss.com/docs/translate
2903
- */
2904
- translate: [{
2905
- translate: scaleTranslate()
2906
- }],
2907
- /**
2908
- * Translate X
2909
- * @see https://tailwindcss.com/docs/translate
2910
- */
2911
- "translate-x": [{
2912
- "translate-x": scaleTranslate()
2913
- }],
2914
- /**
2915
- * Translate Y
2916
- * @see https://tailwindcss.com/docs/translate
2917
- */
2918
- "translate-y": [{
2919
- "translate-y": scaleTranslate()
2920
- }],
2921
- /**
2922
- * Translate Z
2923
- * @see https://tailwindcss.com/docs/translate
2924
- */
2925
- "translate-z": [{
2926
- "translate-z": scaleTranslate()
2927
- }],
2928
- /**
2929
- * Translate None
2930
- * @see https://tailwindcss.com/docs/translate
2931
- */
2932
- "translate-none": ["translate-none"],
2933
- // ---------------------
2934
- // --- Interactivity ---
2935
- // ---------------------
2936
- /**
2937
- * Accent Color
2938
- * @see https://tailwindcss.com/docs/accent-color
2939
- */
2940
- accent: [{
2941
- accent: scaleColor()
2942
- }],
2943
- /**
2944
- * Appearance
2945
- * @see https://tailwindcss.com/docs/appearance
2946
- */
2947
- appearance: [{
2948
- appearance: ["none", "auto"]
2949
- }],
2950
- /**
2951
- * Caret Color
2952
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
2953
- */
2954
- "caret-color": [{
2955
- caret: scaleColor()
2956
- }],
2957
- /**
2958
- * Color Scheme
2959
- * @see https://tailwindcss.com/docs/color-scheme
2960
- */
2961
- "color-scheme": [{
2962
- scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
2963
- }],
2964
- /**
2965
- * Cursor
2966
- * @see https://tailwindcss.com/docs/cursor
2967
- */
2968
- cursor: [{
2969
- cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryVariable, isArbitraryValue]
2970
- }],
2971
- /**
2972
- * Field Sizing
2973
- * @see https://tailwindcss.com/docs/field-sizing
2974
- */
2975
- "field-sizing": [{
2976
- "field-sizing": ["fixed", "content"]
2977
- }],
2978
- /**
2979
- * Pointer Events
2980
- * @see https://tailwindcss.com/docs/pointer-events
2981
- */
2982
- "pointer-events": [{
2983
- "pointer-events": ["auto", "none"]
2984
- }],
2985
- /**
2986
- * Resize
2987
- * @see https://tailwindcss.com/docs/resize
2988
- */
2989
- resize: [{
2990
- resize: ["none", "", "y", "x"]
2991
- }],
2992
- /**
2993
- * Scroll Behavior
2994
- * @see https://tailwindcss.com/docs/scroll-behavior
2995
- */
2996
- "scroll-behavior": [{
2997
- scroll: ["auto", "smooth"]
2998
- }],
2999
- /**
3000
- * Scroll Margin
3001
- * @see https://tailwindcss.com/docs/scroll-margin
3002
- */
3003
- "scroll-m": [{
3004
- "scroll-m": scaleUnambiguousSpacing()
3005
- }],
3006
- /**
3007
- * Scroll Margin X
3008
- * @see https://tailwindcss.com/docs/scroll-margin
3009
- */
3010
- "scroll-mx": [{
3011
- "scroll-mx": scaleUnambiguousSpacing()
3012
- }],
3013
- /**
3014
- * Scroll Margin Y
3015
- * @see https://tailwindcss.com/docs/scroll-margin
3016
- */
3017
- "scroll-my": [{
3018
- "scroll-my": scaleUnambiguousSpacing()
3019
- }],
3020
- /**
3021
- * Scroll Margin Start
3022
- * @see https://tailwindcss.com/docs/scroll-margin
3023
- */
3024
- "scroll-ms": [{
3025
- "scroll-ms": scaleUnambiguousSpacing()
3026
- }],
3027
- /**
3028
- * Scroll Margin End
3029
- * @see https://tailwindcss.com/docs/scroll-margin
3030
- */
3031
- "scroll-me": [{
3032
- "scroll-me": scaleUnambiguousSpacing()
3033
- }],
3034
- /**
3035
- * Scroll Margin Top
3036
- * @see https://tailwindcss.com/docs/scroll-margin
3037
- */
3038
- "scroll-mt": [{
3039
- "scroll-mt": scaleUnambiguousSpacing()
3040
- }],
3041
- /**
3042
- * Scroll Margin Right
3043
- * @see https://tailwindcss.com/docs/scroll-margin
3044
- */
3045
- "scroll-mr": [{
3046
- "scroll-mr": scaleUnambiguousSpacing()
3047
- }],
3048
- /**
3049
- * Scroll Margin Bottom
3050
- * @see https://tailwindcss.com/docs/scroll-margin
3051
- */
3052
- "scroll-mb": [{
3053
- "scroll-mb": scaleUnambiguousSpacing()
3054
- }],
3055
- /**
3056
- * Scroll Margin Left
3057
- * @see https://tailwindcss.com/docs/scroll-margin
3058
- */
3059
- "scroll-ml": [{
3060
- "scroll-ml": scaleUnambiguousSpacing()
3061
- }],
3062
- /**
3063
- * Scroll Padding
3064
- * @see https://tailwindcss.com/docs/scroll-padding
3065
- */
3066
- "scroll-p": [{
3067
- "scroll-p": scaleUnambiguousSpacing()
3068
- }],
3069
- /**
3070
- * Scroll Padding X
3071
- * @see https://tailwindcss.com/docs/scroll-padding
3072
- */
3073
- "scroll-px": [{
3074
- "scroll-px": scaleUnambiguousSpacing()
3075
- }],
3076
- /**
3077
- * Scroll Padding Y
3078
- * @see https://tailwindcss.com/docs/scroll-padding
3079
- */
3080
- "scroll-py": [{
3081
- "scroll-py": scaleUnambiguousSpacing()
3082
- }],
3083
- /**
3084
- * Scroll Padding Start
3085
- * @see https://tailwindcss.com/docs/scroll-padding
3086
- */
3087
- "scroll-ps": [{
3088
- "scroll-ps": scaleUnambiguousSpacing()
3089
- }],
3090
- /**
3091
- * Scroll Padding End
3092
- * @see https://tailwindcss.com/docs/scroll-padding
3093
- */
3094
- "scroll-pe": [{
3095
- "scroll-pe": scaleUnambiguousSpacing()
3096
- }],
3097
- /**
3098
- * Scroll Padding Top
3099
- * @see https://tailwindcss.com/docs/scroll-padding
3100
- */
3101
- "scroll-pt": [{
3102
- "scroll-pt": scaleUnambiguousSpacing()
3103
- }],
3104
- /**
3105
- * Scroll Padding Right
3106
- * @see https://tailwindcss.com/docs/scroll-padding
3107
- */
3108
- "scroll-pr": [{
3109
- "scroll-pr": scaleUnambiguousSpacing()
3110
- }],
3111
- /**
3112
- * Scroll Padding Bottom
3113
- * @see https://tailwindcss.com/docs/scroll-padding
3114
- */
3115
- "scroll-pb": [{
3116
- "scroll-pb": scaleUnambiguousSpacing()
3117
- }],
3118
- /**
3119
- * Scroll Padding Left
3120
- * @see https://tailwindcss.com/docs/scroll-padding
3121
- */
3122
- "scroll-pl": [{
3123
- "scroll-pl": scaleUnambiguousSpacing()
3124
- }],
3125
- /**
3126
- * Scroll Snap Align
3127
- * @see https://tailwindcss.com/docs/scroll-snap-align
3128
- */
3129
- "snap-align": [{
3130
- snap: ["start", "end", "center", "align-none"]
3131
- }],
3132
- /**
3133
- * Scroll Snap Stop
3134
- * @see https://tailwindcss.com/docs/scroll-snap-stop
3135
- */
3136
- "snap-stop": [{
3137
- snap: ["normal", "always"]
3138
- }],
3139
- /**
3140
- * Scroll Snap Type
3141
- * @see https://tailwindcss.com/docs/scroll-snap-type
3142
- */
3143
- "snap-type": [{
3144
- snap: ["none", "x", "y", "both"]
3145
- }],
3146
- /**
3147
- * Scroll Snap Type Strictness
3148
- * @see https://tailwindcss.com/docs/scroll-snap-type
3149
- */
3150
- "snap-strictness": [{
3151
- snap: ["mandatory", "proximity"]
3152
- }],
3153
- /**
3154
- * Touch Action
3155
- * @see https://tailwindcss.com/docs/touch-action
3156
- */
3157
- touch: [{
3158
- touch: ["auto", "none", "manipulation"]
3159
- }],
3160
- /**
3161
- * Touch Action X
3162
- * @see https://tailwindcss.com/docs/touch-action
3163
- */
3164
- "touch-x": [{
3165
- "touch-pan": ["x", "left", "right"]
3166
- }],
3167
- /**
3168
- * Touch Action Y
3169
- * @see https://tailwindcss.com/docs/touch-action
3170
- */
3171
- "touch-y": [{
3172
- "touch-pan": ["y", "up", "down"]
3173
- }],
3174
- /**
3175
- * Touch Action Pinch Zoom
3176
- * @see https://tailwindcss.com/docs/touch-action
3177
- */
3178
- "touch-pz": ["touch-pinch-zoom"],
3179
- /**
3180
- * User Select
3181
- * @see https://tailwindcss.com/docs/user-select
3182
- */
3183
- select: [{
3184
- select: ["none", "text", "all", "auto"]
3185
- }],
3186
- /**
3187
- * Will Change
3188
- * @see https://tailwindcss.com/docs/will-change
3189
- */
3190
- "will-change": [{
3191
- "will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
3192
- }],
3193
- // -----------
3194
- // --- SVG ---
3195
- // -----------
3196
- /**
3197
- * Fill
3198
- * @see https://tailwindcss.com/docs/fill
3199
- */
3200
- fill: [{
3201
- fill: ["none", ...scaleColor()]
3202
- }],
3203
- /**
3204
- * Stroke Width
3205
- * @see https://tailwindcss.com/docs/stroke-width
3206
- */
3207
- "stroke-w": [{
3208
- stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
3209
- }],
3210
- /**
3211
- * Stroke
3212
- * @see https://tailwindcss.com/docs/stroke
3213
- */
3214
- stroke: [{
3215
- stroke: ["none", ...scaleColor()]
3216
- }],
3217
- // ---------------------
3218
- // --- Accessibility ---
3219
- // ---------------------
3220
- /**
3221
- * Forced Color Adjust
3222
- * @see https://tailwindcss.com/docs/forced-color-adjust
3223
- */
3224
- "forced-color-adjust": [{
3225
- "forced-color-adjust": ["auto", "none"]
3226
- }]
3227
- },
3228
- conflictingClassGroups: {
3229
- overflow: ["overflow-x", "overflow-y"],
3230
- overscroll: ["overscroll-x", "overscroll-y"],
3231
- inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
3232
- "inset-x": ["right", "left"],
3233
- "inset-y": ["top", "bottom"],
3234
- flex: ["basis", "grow", "shrink"],
3235
- gap: ["gap-x", "gap-y"],
3236
- p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
3237
- px: ["pr", "pl"],
3238
- py: ["pt", "pb"],
3239
- m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
3240
- mx: ["mr", "ml"],
3241
- my: ["mt", "mb"],
3242
- size: ["w", "h"],
3243
- "font-size": ["leading"],
3244
- "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
3245
- "fvn-ordinal": ["fvn-normal"],
3246
- "fvn-slashed-zero": ["fvn-normal"],
3247
- "fvn-figure": ["fvn-normal"],
3248
- "fvn-spacing": ["fvn-normal"],
3249
- "fvn-fraction": ["fvn-normal"],
3250
- "line-clamp": ["display", "overflow"],
3251
- rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
3252
- "rounded-s": ["rounded-ss", "rounded-es"],
3253
- "rounded-e": ["rounded-se", "rounded-ee"],
3254
- "rounded-t": ["rounded-tl", "rounded-tr"],
3255
- "rounded-r": ["rounded-tr", "rounded-br"],
3256
- "rounded-b": ["rounded-br", "rounded-bl"],
3257
- "rounded-l": ["rounded-tl", "rounded-bl"],
3258
- "border-spacing": ["border-spacing-x", "border-spacing-y"],
3259
- "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
3260
- "border-w-x": ["border-w-r", "border-w-l"],
3261
- "border-w-y": ["border-w-t", "border-w-b"],
3262
- "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
3263
- "border-color-x": ["border-color-r", "border-color-l"],
3264
- "border-color-y": ["border-color-t", "border-color-b"],
3265
- translate: ["translate-x", "translate-y", "translate-none"],
3266
- "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
3267
- "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
3268
- "scroll-mx": ["scroll-mr", "scroll-ml"],
3269
- "scroll-my": ["scroll-mt", "scroll-mb"],
3270
- "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
3271
- "scroll-px": ["scroll-pr", "scroll-pl"],
3272
- "scroll-py": ["scroll-pt", "scroll-pb"],
3273
- touch: ["touch-x", "touch-y", "touch-pz"],
3274
- "touch-x": ["touch"],
3275
- "touch-y": ["touch"],
3276
- "touch-pz": ["touch"]
3277
- },
3278
- conflictingClassGroupModifiers: {
3279
- "font-size": ["leading"]
3280
- },
3281
- orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
3282
- };
3283
- };
3284
- const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
2
+ let react = require("react");
3
+ let react_use = require("react-use");
4
+ let motion_react = require("motion/react");
5
+ let clsx = require("clsx");
6
+ let tailwind_merge = require("tailwind-merge");
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ //#region src/client/hooks/use-disable-scroll.ts
9
+ var useDisableScroll = (isDisableScroll) => {
10
+ (0, react.useEffect)(() => {
11
+ if (!isDisableScroll) return;
12
+ const scrollPosition = window.scrollY;
13
+ return () => {
14
+ window.scrollTo(0, scrollPosition);
15
+ };
16
+ }, []);
17
+ };
18
+ //#endregion
19
+ //#region src/client/hooks/use-is-client.ts
20
+ var useIsClient = () => {
21
+ const [isClient, setIsClient] = (0, react.useState)(false);
22
+ (0, react.useEffect)(() => {
23
+ setIsClient(true);
24
+ }, []);
25
+ return isClient;
26
+ };
27
+ //#endregion
28
+ //#region src/server/constants/index.ts
29
+ var THEME = {
30
+ VIEW_PORT: {
31
+ EXTRA_SMALL: 280,
32
+ SMALL: 320,
33
+ SMALL_MOBILE: 380,
34
+ MOBILE: 450,
35
+ MEDIUM: 500,
36
+ EXTRA_MEDIUM: 600,
37
+ TABLET: 768,
38
+ LAPTOP: 1024,
39
+ LAPTOP_BIG: 1200,
40
+ BIG: 1440,
41
+ VERY_BIG: 1920
42
+ },
43
+ OFFSET: {
44
+ 1: 8,
45
+ 2: 16,
46
+ 3: 24,
47
+ 4: 32,
48
+ 5: 40,
49
+ 6: 48,
50
+ 7: 56,
51
+ 8: 64
52
+ }
53
+ };
54
+ //#endregion
55
+ //#region src/client/hooks/use-view-port.ts
56
+ var useLaptopBigViewPort = () => {
57
+ return {
58
+ isLaptopBigMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`),
59
+ isLaptopBigMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.LAPTOP_BIG}px)`)
60
+ };
61
+ };
62
+ var useLaptopViewPort = () => {
63
+ return {
64
+ isLaptopMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.LAPTOP}px)`),
65
+ isLaptopMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.LAPTOP}px)`)
66
+ };
67
+ };
68
+ var useTabletViewPort = () => {
69
+ return {
70
+ isTabletMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.TABLET}px)`),
71
+ isTabletMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.TABLET}px)`)
72
+ };
73
+ };
74
+ var useExtraMediumViewPort = () => {
75
+ return {
76
+ isExtraMediumMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`),
77
+ isExtraMediumMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.EXTRA_MEDIUM}px)`)
78
+ };
79
+ };
80
+ var useMobileViewPort = () => {
81
+ return {
82
+ isMobileMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.MOBILE}px)`),
83
+ isMobileMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.MOBILE}px)`)
84
+ };
85
+ };
86
+ var useSmallViewPort = () => {
87
+ return {
88
+ isSmallMinWidth: (0, react_use.useMedia)(`(min-width: ${THEME.VIEW_PORT.SMALL}px)`),
89
+ isSmallMaxWidth: (0, react_use.useMedia)(`(max-width: ${THEME.VIEW_PORT.SMALL}px)`)
90
+ };
91
+ };
92
+ //#endregion
93
+ //#region src/client/hooks/use-appear-animation.ts
94
+ var useAppearAnimation = ({ once = true, margin = "-100px", delay = .1, direction = "up", animationDistance = 50, duration = .8, ease = "easeOut" } = {}) => {
95
+ const ref = (0, react.useRef)(null);
96
+ const isInView = (0, motion_react.useInView)(ref, {
97
+ once,
98
+ margin
99
+ });
100
+ const getInitialState = () => {
101
+ switch (direction) {
102
+ case "up": return {
103
+ opacity: 0,
104
+ y: animationDistance
105
+ };
106
+ case "down": return {
107
+ opacity: 0,
108
+ y: -animationDistance
109
+ };
110
+ case "left": return {
111
+ opacity: 0,
112
+ x: animationDistance
113
+ };
114
+ case "right": return {
115
+ opacity: 0,
116
+ x: -animationDistance
117
+ };
118
+ case "scale": return {
119
+ opacity: 0,
120
+ scale: .8
121
+ };
122
+ case "fade": return { opacity: 0 };
123
+ default: return {
124
+ opacity: 0,
125
+ y: animationDistance
126
+ };
127
+ }
128
+ };
129
+ const getAnimateState = () => {
130
+ switch (direction) {
131
+ case "up":
132
+ case "down": return {
133
+ opacity: 1,
134
+ y: 0
135
+ };
136
+ case "left":
137
+ case "right": return {
138
+ opacity: 1,
139
+ x: 0
140
+ };
141
+ case "scale": return {
142
+ opacity: 1,
143
+ scale: 1
144
+ };
145
+ case "fade": return { opacity: 1 };
146
+ default: return {
147
+ opacity: 1,
148
+ y: 0
149
+ };
150
+ }
151
+ };
152
+ return {
153
+ ref,
154
+ isInView,
155
+ motionProps: {
156
+ initial: getInitialState(),
157
+ animate: isInView ? getAnimateState() : void 0,
158
+ transition: {
159
+ duration,
160
+ ease,
161
+ delay
162
+ }
163
+ }
164
+ };
165
+ };
166
+ //#endregion
167
+ //#region src/server/lib/css.ts
3285
168
  function cn(...inputs) {
3286
- return twMerge(clsx(inputs));
169
+ return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
3287
170
  }
3288
- const HeaderWrapper = ({
3289
- children,
3290
- className,
3291
- hideClassName,
3292
- scrollPosition = 100,
3293
- hideBackgroundOnScroll = true
3294
- }) => {
3295
- const { y } = useWindowScroll();
3296
- const isClient = useIsClient();
3297
- const isHiddenBackground = hideBackgroundOnScroll && y > scrollPosition && isClient;
3298
- const headerClass = cn(
3299
- "fixed z-30 w-full transition bg-background",
3300
- className,
3301
- {
3302
- "bg-transparent": isHiddenBackground
3303
- },
3304
- {
3305
- hideClassName: isHiddenBackground && hideClassName
3306
- }
3307
- );
3308
- return /* @__PURE__ */ jsxRuntime.jsx("header", { className: headerClass, children });
3309
- };
3310
- const InfinityList = ({
3311
- children,
3312
- intersectionElementClassName,
3313
- isNext,
3314
- intersectionElement,
3315
- onIntersection
3316
- }) => {
3317
- const intersectionRef = React.useRef({});
3318
- const intersection = useIntersection(intersectionRef, {
3319
- root: null,
3320
- rootMargin: "0px",
3321
- threshold: 1
3322
- });
3323
- React.useEffect(() => {
3324
- if (!(intersection == null ? void 0 : intersection.isIntersecting)) return;
3325
- onIntersection();
3326
- }, [intersection == null ? void 0 : intersection.isIntersecting]);
3327
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3328
- /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
3329
- /* @__PURE__ */ jsxRuntime.jsx(
3330
- "div",
3331
- {
3332
- className: cn(intersectionElementClassName, {
3333
- hidden: !isNext
3334
- }),
3335
- ref: intersectionRef,
3336
- children: intersectionElement()
3337
- }
3338
- )
3339
- ] });
3340
- };
171
+ //#endregion
172
+ //#region src/client/ui/header-wrapper.tsx
173
+ var HeaderWrapper = ({ children, className, hideClassName, scrollPosition = 100, hideBackgroundOnScroll = true }) => {
174
+ const { y } = (0, react_use.useWindowScroll)();
175
+ const isClient = useIsClient();
176
+ const isHiddenBackground = hideBackgroundOnScroll && y > scrollPosition && isClient;
177
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
178
+ className: cn("fixed z-30 w-full transition bg-background", className, { "bg-transparent": isHiddenBackground }, { hideClassName: isHiddenBackground && hideClassName }),
179
+ children
180
+ });
181
+ };
182
+ //#endregion
183
+ //#region src/client/ui/infinity-list.tsx
184
+ var InfinityList = ({ children, intersectionElementClassName, isNext, intersectionElement, onIntersection }) => {
185
+ const intersectionRef = (0, react.useRef)({});
186
+ const intersection = (0, react_use.useIntersection)(intersectionRef, {
187
+ root: null,
188
+ rootMargin: "0px",
189
+ threshold: 1
190
+ });
191
+ (0, react.useEffect)(() => {
192
+ if (!intersection?.isIntersecting) return;
193
+ onIntersection();
194
+ }, [intersection?.isIntersecting]);
195
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
196
+ className: cn(intersectionElementClassName, { hidden: !isNext }),
197
+ ref: intersectionRef,
198
+ children: intersectionElement()
199
+ })] });
200
+ };
201
+ //#endregion
3341
202
  exports.HeaderWrapper = HeaderWrapper;
3342
203
  exports.InfinityList = InfinityList;
3343
204
  exports.useAppearAnimation = useAppearAnimation;