UNPKG

24.9 kBJavaScriptView Raw
1const colors = require('../colors')
2
3module.exports = {
4 purge: [],
5 presets: [],
6 darkMode: false, // or 'media' or 'class'
7 theme: {
8 screens: {
9 sm: '640px',
10 md: '768px',
11 lg: '1024px',
12 xl: '1280px',
13 '2xl': '1536px',
14 },
15 colors: {
16 transparent: 'transparent',
17 current: 'currentColor',
18
19 black: colors.black,
20 white: colors.white,
21 gray: colors.coolGray,
22 red: colors.red,
23 yellow: colors.amber,
24 green: colors.emerald,
25 blue: colors.blue,
26 indigo: colors.indigo,
27 purple: colors.violet,
28 pink: colors.pink,
29 },
30 spacing: {
31 px: '1px',
32 0: '0px',
33 0.5: '0.125rem',
34 1: '0.25rem',
35 1.5: '0.375rem',
36 2: '0.5rem',
37 2.5: '0.625rem',
38 3: '0.75rem',
39 3.5: '0.875rem',
40 4: '1rem',
41 5: '1.25rem',
42 6: '1.5rem',
43 7: '1.75rem',
44 8: '2rem',
45 9: '2.25rem',
46 10: '2.5rem',
47 11: '2.75rem',
48 12: '3rem',
49 14: '3.5rem',
50 16: '4rem',
51 20: '5rem',
52 24: '6rem',
53 28: '7rem',
54 32: '8rem',
55 36: '9rem',
56 40: '10rem',
57 44: '11rem',
58 48: '12rem',
59 52: '13rem',
60 56: '14rem',
61 60: '15rem',
62 64: '16rem',
63 72: '18rem',
64 80: '20rem',
65 96: '24rem',
66 },
67 animation: {
68 none: 'none',
69 spin: 'spin 1s linear infinite',
70 ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
71 pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
72 bounce: 'bounce 1s infinite',
73 },
74 backdropBlur: (theme) => theme('blur'),
75 backdropBrightness: (theme) => theme('brightness'),
76 backdropContrast: (theme) => theme('contrast'),
77 backdropGrayscale: (theme) => theme('grayscale'),
78 backdropHueRotate: (theme) => theme('hueRotate'),
79 backdropInvert: (theme) => theme('invert'),
80 backdropOpacity: (theme) => theme('opacity'),
81 backdropSaturate: (theme) => theme('saturate'),
82 backdropSepia: (theme) => theme('sepia'),
83 backgroundColor: (theme) => theme('colors'),
84 backgroundImage: {
85 none: 'none',
86 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
87 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
88 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
89 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
90 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
91 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
92 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
93 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
94 },
95 backgroundOpacity: (theme) => theme('opacity'),
96 backgroundPosition: {
97 bottom: 'bottom',
98 center: 'center',
99 left: 'left',
100 'left-bottom': 'left bottom',
101 'left-top': 'left top',
102 right: 'right',
103 'right-bottom': 'right bottom',
104 'right-top': 'right top',
105 top: 'top',
106 },
107 backgroundSize: {
108 auto: 'auto',
109 cover: 'cover',
110 contain: 'contain',
111 },
112 blur: {
113 0: '0',
114 none: '0',
115 sm: '4px',
116 DEFAULT: '8px',
117 md: '12px',
118 lg: '16px',
119 xl: '24px',
120 '2xl': '40px',
121 '3xl': '64px',
122 },
123 brightness: {
124 0: '0',
125 50: '.5',
126 75: '.75',
127 90: '.9',
128 95: '.95',
129 100: '1',
130 105: '1.05',
131 110: '1.1',
132 125: '1.25',
133 150: '1.5',
134 200: '2',
135 },
136 borderColor: (theme) => ({
137 ...theme('colors'),
138 DEFAULT: theme('colors.gray.200', 'currentColor'),
139 }),
140 borderOpacity: (theme) => theme('opacity'),
141 borderRadius: {
142 none: '0px',
143 sm: '0.125rem',
144 DEFAULT: '0.25rem',
145 md: '0.375rem',
146 lg: '0.5rem',
147 xl: '0.75rem',
148 '2xl': '1rem',
149 '3xl': '1.5rem',
150 full: '9999px',
151 },
152 borderWidth: {
153 DEFAULT: '1px',
154 0: '0px',
155 2: '2px',
156 4: '4px',
157 8: '8px',
158 },
159 boxShadow: {
160 sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
161 DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
162 md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
163 lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
164 xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
165 '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
166 inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
167 none: 'none',
168 },
169 caretColor: (theme) => theme('colors'),
170 contrast: {
171 0: '0',
172 50: '.5',
173 75: '.75',
174 100: '1',
175 125: '1.25',
176 150: '1.5',
177 200: '2',
178 },
179 container: {},
180 content: {
181 none: 'none',
182 },
183 cursor: {
184 auto: 'auto',
185 default: 'default',
186 pointer: 'pointer',
187 wait: 'wait',
188 text: 'text',
189 move: 'move',
190 help: 'help',
191 'not-allowed': 'not-allowed',
192 },
193 divideColor: (theme) => theme('borderColor'),
194 divideOpacity: (theme) => theme('borderOpacity'),
195 divideWidth: (theme) => theme('borderWidth'),
196 dropShadow: {
197 sm: '0 1px 1px rgba(0,0,0,0.05)',
198 DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
199 md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
200 lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
201 xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
202 '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
203 none: '0 0 #0000',
204 },
205 fill: { current: 'currentColor' },
206 grayscale: {
207 0: '0',
208 DEFAULT: '100%',
209 },
210 hueRotate: {
211 '-180': '-180deg',
212 '-90': '-90deg',
213 '-60': '-60deg',
214 '-30': '-30deg',
215 '-15': '-15deg',
216 0: '0deg',
217 15: '15deg',
218 30: '30deg',
219 60: '60deg',
220 90: '90deg',
221 180: '180deg',
222 },
223 invert: {
224 0: '0',
225 DEFAULT: '100%',
226 },
227 flex: {
228 1: '1 1 0%',
229 auto: '1 1 auto',
230 initial: '0 1 auto',
231 none: 'none',
232 },
233 flexGrow: {
234 0: '0',
235 DEFAULT: '1',
236 },
237 flexShrink: {
238 0: '0',
239 DEFAULT: '1',
240 },
241 fontFamily: {
242 sans: [
243 'ui-sans-serif',
244 'system-ui',
245 '-apple-system',
246 'BlinkMacSystemFont',
247 '"Segoe UI"',
248 'Roboto',
249 '"Helvetica Neue"',
250 'Arial',
251 '"Noto Sans"',
252 'sans-serif',
253 '"Apple Color Emoji"',
254 '"Segoe UI Emoji"',
255 '"Segoe UI Symbol"',
256 '"Noto Color Emoji"',
257 ],
258 serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
259 mono: [
260 'ui-monospace',
261 'SFMono-Regular',
262 'Menlo',
263 'Monaco',
264 'Consolas',
265 '"Liberation Mono"',
266 '"Courier New"',
267 'monospace',
268 ],
269 },
270 fontSize: {
271 xs: ['0.75rem', { lineHeight: '1rem' }],
272 sm: ['0.875rem', { lineHeight: '1.25rem' }],
273 base: ['1rem', { lineHeight: '1.5rem' }],
274 lg: ['1.125rem', { lineHeight: '1.75rem' }],
275 xl: ['1.25rem', { lineHeight: '1.75rem' }],
276 '2xl': ['1.5rem', { lineHeight: '2rem' }],
277 '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
278 '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
279 '5xl': ['3rem', { lineHeight: '1' }],
280 '6xl': ['3.75rem', { lineHeight: '1' }],
281 '7xl': ['4.5rem', { lineHeight: '1' }],
282 '8xl': ['6rem', { lineHeight: '1' }],
283 '9xl': ['8rem', { lineHeight: '1' }],
284 },
285 fontWeight: {
286 thin: '100',
287 extralight: '200',
288 light: '300',
289 normal: '400',
290 medium: '500',
291 semibold: '600',
292 bold: '700',
293 extrabold: '800',
294 black: '900',
295 },
296 gap: (theme) => theme('spacing'),
297 gradientColorStops: (theme) => theme('colors'),
298 gridAutoColumns: {
299 auto: 'auto',
300 min: 'min-content',
301 max: 'max-content',
302 fr: 'minmax(0, 1fr)',
303 },
304 gridAutoRows: {
305 auto: 'auto',
306 min: 'min-content',
307 max: 'max-content',
308 fr: 'minmax(0, 1fr)',
309 },
310 gridColumn: {
311 auto: 'auto',
312 'span-1': 'span 1 / span 1',
313 'span-2': 'span 2 / span 2',
314 'span-3': 'span 3 / span 3',
315 'span-4': 'span 4 / span 4',
316 'span-5': 'span 5 / span 5',
317 'span-6': 'span 6 / span 6',
318 'span-7': 'span 7 / span 7',
319 'span-8': 'span 8 / span 8',
320 'span-9': 'span 9 / span 9',
321 'span-10': 'span 10 / span 10',
322 'span-11': 'span 11 / span 11',
323 'span-12': 'span 12 / span 12',
324 'span-full': '1 / -1',
325 },
326 gridColumnEnd: {
327 auto: 'auto',
328 1: '1',
329 2: '2',
330 3: '3',
331 4: '4',
332 5: '5',
333 6: '6',
334 7: '7',
335 8: '8',
336 9: '9',
337 10: '10',
338 11: '11',
339 12: '12',
340 13: '13',
341 },
342 gridColumnStart: {
343 auto: 'auto',
344 1: '1',
345 2: '2',
346 3: '3',
347 4: '4',
348 5: '5',
349 6: '6',
350 7: '7',
351 8: '8',
352 9: '9',
353 10: '10',
354 11: '11',
355 12: '12',
356 13: '13',
357 },
358 gridRow: {
359 auto: 'auto',
360 'span-1': 'span 1 / span 1',
361 'span-2': 'span 2 / span 2',
362 'span-3': 'span 3 / span 3',
363 'span-4': 'span 4 / span 4',
364 'span-5': 'span 5 / span 5',
365 'span-6': 'span 6 / span 6',
366 'span-full': '1 / -1',
367 },
368 gridRowStart: {
369 auto: 'auto',
370 1: '1',
371 2: '2',
372 3: '3',
373 4: '4',
374 5: '5',
375 6: '6',
376 7: '7',
377 },
378 gridRowEnd: {
379 auto: 'auto',
380 1: '1',
381 2: '2',
382 3: '3',
383 4: '4',
384 5: '5',
385 6: '6',
386 7: '7',
387 },
388 gridTemplateColumns: {
389 none: 'none',
390 1: 'repeat(1, minmax(0, 1fr))',
391 2: 'repeat(2, minmax(0, 1fr))',
392 3: 'repeat(3, minmax(0, 1fr))',
393 4: 'repeat(4, minmax(0, 1fr))',
394 5: 'repeat(5, minmax(0, 1fr))',
395 6: 'repeat(6, minmax(0, 1fr))',
396 7: 'repeat(7, minmax(0, 1fr))',
397 8: 'repeat(8, minmax(0, 1fr))',
398 9: 'repeat(9, minmax(0, 1fr))',
399 10: 'repeat(10, minmax(0, 1fr))',
400 11: 'repeat(11, minmax(0, 1fr))',
401 12: 'repeat(12, minmax(0, 1fr))',
402 },
403 gridTemplateRows: {
404 none: 'none',
405 1: 'repeat(1, minmax(0, 1fr))',
406 2: 'repeat(2, minmax(0, 1fr))',
407 3: 'repeat(3, minmax(0, 1fr))',
408 4: 'repeat(4, minmax(0, 1fr))',
409 5: 'repeat(5, minmax(0, 1fr))',
410 6: 'repeat(6, minmax(0, 1fr))',
411 },
412 height: (theme) => ({
413 auto: 'auto',
414 ...theme('spacing'),
415 '1/2': '50%',
416 '1/3': '33.333333%',
417 '2/3': '66.666667%',
418 '1/4': '25%',
419 '2/4': '50%',
420 '3/4': '75%',
421 '1/5': '20%',
422 '2/5': '40%',
423 '3/5': '60%',
424 '4/5': '80%',
425 '1/6': '16.666667%',
426 '2/6': '33.333333%',
427 '3/6': '50%',
428 '4/6': '66.666667%',
429 '5/6': '83.333333%',
430 full: '100%',
431 screen: '100vh',
432 }),
433 inset: (theme, { negative }) => ({
434 auto: 'auto',
435 ...theme('spacing'),
436 ...negative(theme('spacing')),
437 '1/2': '50%',
438 '1/3': '33.333333%',
439 '2/3': '66.666667%',
440 '1/4': '25%',
441 '2/4': '50%',
442 '3/4': '75%',
443 full: '100%',
444 '-1/2': '-50%',
445 '-1/3': '-33.333333%',
446 '-2/3': '-66.666667%',
447 '-1/4': '-25%',
448 '-2/4': '-50%',
449 '-3/4': '-75%',
450 '-full': '-100%',
451 }),
452 keyframes: {
453 spin: {
454 to: {
455 transform: 'rotate(360deg)',
456 },
457 },
458 ping: {
459 '75%, 100%': {
460 transform: 'scale(2)',
461 opacity: '0',
462 },
463 },
464 pulse: {
465 '50%': {
466 opacity: '.5',
467 },
468 },
469 bounce: {
470 '0%, 100%': {
471 transform: 'translateY(-25%)',
472 animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
473 },
474 '50%': {
475 transform: 'none',
476 animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
477 },
478 },
479 },
480 letterSpacing: {
481 tighter: '-0.05em',
482 tight: '-0.025em',
483 normal: '0em',
484 wide: '0.025em',
485 wider: '0.05em',
486 widest: '0.1em',
487 },
488 lineHeight: {
489 none: '1',
490 tight: '1.25',
491 snug: '1.375',
492 normal: '1.5',
493 relaxed: '1.625',
494 loose: '2',
495 3: '.75rem',
496 4: '1rem',
497 5: '1.25rem',
498 6: '1.5rem',
499 7: '1.75rem',
500 8: '2rem',
501 9: '2.25rem',
502 10: '2.5rem',
503 },
504 listStyleType: {
505 none: 'none',
506 disc: 'disc',
507 decimal: 'decimal',
508 },
509 margin: (theme, { negative }) => ({
510 auto: 'auto',
511 ...theme('spacing'),
512 ...negative(theme('spacing')),
513 }),
514 maxHeight: (theme) => ({
515 ...theme('spacing'),
516 full: '100%',
517 screen: '100vh',
518 }),
519 maxWidth: (theme, { breakpoints }) => ({
520 none: 'none',
521 0: '0rem',
522 xs: '20rem',
523 sm: '24rem',
524 md: '28rem',
525 lg: '32rem',
526 xl: '36rem',
527 '2xl': '42rem',
528 '3xl': '48rem',
529 '4xl': '56rem',
530 '5xl': '64rem',
531 '6xl': '72rem',
532 '7xl': '80rem',
533 full: '100%',
534 min: 'min-content',
535 max: 'max-content',
536 prose: '65ch',
537 ...breakpoints(theme('screens')),
538 }),
539 minHeight: {
540 0: '0px',
541 full: '100%',
542 screen: '100vh',
543 },
544 minWidth: {
545 0: '0px',
546 full: '100%',
547 min: 'min-content',
548 max: 'max-content',
549 },
550 objectPosition: {
551 bottom: 'bottom',
552 center: 'center',
553 left: 'left',
554 'left-bottom': 'left bottom',
555 'left-top': 'left top',
556 right: 'right',
557 'right-bottom': 'right bottom',
558 'right-top': 'right top',
559 top: 'top',
560 },
561 opacity: {
562 0: '0',
563 5: '0.05',
564 10: '0.1',
565 20: '0.2',
566 25: '0.25',
567 30: '0.3',
568 40: '0.4',
569 50: '0.5',
570 60: '0.6',
571 70: '0.7',
572 75: '0.75',
573 80: '0.8',
574 90: '0.9',
575 95: '0.95',
576 100: '1',
577 },
578 order: {
579 first: '-9999',
580 last: '9999',
581 none: '0',
582 1: '1',
583 2: '2',
584 3: '3',
585 4: '4',
586 5: '5',
587 6: '6',
588 7: '7',
589 8: '8',
590 9: '9',
591 10: '10',
592 11: '11',
593 12: '12',
594 },
595 outline: {
596 none: ['2px solid transparent', '2px'],
597 white: ['2px dotted white', '2px'],
598 black: ['2px dotted black', '2px'],
599 },
600 padding: (theme) => theme('spacing'),
601 placeholderColor: (theme) => theme('colors'),
602 placeholderOpacity: (theme) => theme('opacity'),
603 ringColor: (theme) => ({
604 DEFAULT: theme('colors.blue.500', '#3b82f6'),
605 ...theme('colors'),
606 }),
607 ringOffsetColor: (theme) => theme('colors'),
608 ringOffsetWidth: {
609 0: '0px',
610 1: '1px',
611 2: '2px',
612 4: '4px',
613 8: '8px',
614 },
615 ringOpacity: (theme) => ({
616 DEFAULT: '0.5',
617 ...theme('opacity'),
618 }),
619 ringWidth: {
620 DEFAULT: '3px',
621 0: '0px',
622 1: '1px',
623 2: '2px',
624 4: '4px',
625 8: '8px',
626 },
627 rotate: {
628 '-180': '-180deg',
629 '-90': '-90deg',
630 '-45': '-45deg',
631 '-12': '-12deg',
632 '-6': '-6deg',
633 '-3': '-3deg',
634 '-2': '-2deg',
635 '-1': '-1deg',
636 0: '0deg',
637 1: '1deg',
638 2: '2deg',
639 3: '3deg',
640 6: '6deg',
641 12: '12deg',
642 45: '45deg',
643 90: '90deg',
644 180: '180deg',
645 },
646 saturate: {
647 0: '0',
648 50: '.5',
649 100: '1',
650 150: '1.5',
651 200: '2',
652 },
653 scale: {
654 0: '0',
655 50: '.5',
656 75: '.75',
657 90: '.9',
658 95: '.95',
659 100: '1',
660 105: '1.05',
661 110: '1.1',
662 125: '1.25',
663 150: '1.5',
664 },
665 sepia: {
666 0: '0',
667 DEFAULT: '100%',
668 },
669 skew: {
670 '-12': '-12deg',
671 '-6': '-6deg',
672 '-3': '-3deg',
673 '-2': '-2deg',
674 '-1': '-1deg',
675 0: '0deg',
676 1: '1deg',
677 2: '2deg',
678 3: '3deg',
679 6: '6deg',
680 12: '12deg',
681 },
682 space: (theme, { negative }) => ({
683 ...theme('spacing'),
684 ...negative(theme('spacing')),
685 }),
686 stroke: {
687 current: 'currentColor',
688 },
689 strokeWidth: {
690 0: '0',
691 1: '1',
692 2: '2',
693 },
694 textColor: (theme) => theme('colors'),
695 textOpacity: (theme) => theme('opacity'),
696 transformOrigin: {
697 center: 'center',
698 top: 'top',
699 'top-right': 'top right',
700 right: 'right',
701 'bottom-right': 'bottom right',
702 bottom: 'bottom',
703 'bottom-left': 'bottom left',
704 left: 'left',
705 'top-left': 'top left',
706 },
707 transitionDelay: {
708 75: '75ms',
709 100: '100ms',
710 150: '150ms',
711 200: '200ms',
712 300: '300ms',
713 500: '500ms',
714 700: '700ms',
715 1000: '1000ms',
716 },
717 transitionDuration: {
718 DEFAULT: '150ms',
719 75: '75ms',
720 100: '100ms',
721 150: '150ms',
722 200: '200ms',
723 300: '300ms',
724 500: '500ms',
725 700: '700ms',
726 1000: '1000ms',
727 },
728 transitionProperty: {
729 none: 'none',
730 all: 'all',
731 DEFAULT:
732 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
733 colors: 'background-color, border-color, color, fill, stroke',
734 opacity: 'opacity',
735 shadow: 'box-shadow',
736 transform: 'transform',
737 },
738 transitionTimingFunction: {
739 DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
740 linear: 'linear',
741 in: 'cubic-bezier(0.4, 0, 1, 1)',
742 out: 'cubic-bezier(0, 0, 0.2, 1)',
743 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
744 },
745 translate: (theme, { negative }) => ({
746 ...theme('spacing'),
747 ...negative(theme('spacing')),
748 '1/2': '50%',
749 '1/3': '33.333333%',
750 '2/3': '66.666667%',
751 '1/4': '25%',
752 '2/4': '50%',
753 '3/4': '75%',
754 full: '100%',
755 '-1/2': '-50%',
756 '-1/3': '-33.333333%',
757 '-2/3': '-66.666667%',
758 '-1/4': '-25%',
759 '-2/4': '-50%',
760 '-3/4': '-75%',
761 '-full': '-100%',
762 }),
763 width: (theme) => ({
764 auto: 'auto',
765 ...theme('spacing'),
766 '1/2': '50%',
767 '1/3': '33.333333%',
768 '2/3': '66.666667%',
769 '1/4': '25%',
770 '2/4': '50%',
771 '3/4': '75%',
772 '1/5': '20%',
773 '2/5': '40%',
774 '3/5': '60%',
775 '4/5': '80%',
776 '1/6': '16.666667%',
777 '2/6': '33.333333%',
778 '3/6': '50%',
779 '4/6': '66.666667%',
780 '5/6': '83.333333%',
781 '1/12': '8.333333%',
782 '2/12': '16.666667%',
783 '3/12': '25%',
784 '4/12': '33.333333%',
785 '5/12': '41.666667%',
786 '6/12': '50%',
787 '7/12': '58.333333%',
788 '8/12': '66.666667%',
789 '9/12': '75%',
790 '10/12': '83.333333%',
791 '11/12': '91.666667%',
792 full: '100%',
793 screen: '100vw',
794 min: 'min-content',
795 max: 'max-content',
796 }),
797 zIndex: {
798 auto: 'auto',
799 0: '0',
800 10: '10',
801 20: '20',
802 30: '30',
803 40: '40',
804 50: '50',
805 },
806 },
807 variantOrder: [
808 'first',
809 'last',
810 'odd',
811 'even',
812 'visited',
813 'checked',
814 'empty',
815 'read-only',
816 'group-hover',
817 'group-focus',
818 'focus-within',
819 'hover',
820 'focus',
821 'focus-visible',
822 'active',
823 'disabled',
824 ],
825 variants: {
826 accessibility: ['responsive', 'focus-within', 'focus'],
827 alignContent: ['responsive'],
828 alignItems: ['responsive'],
829 alignSelf: ['responsive'],
830 animation: ['responsive'],
831 appearance: ['responsive'],
832 backdropBlur: ['responsive'],
833 backdropBrightness: ['responsive'],
834 backdropContrast: ['responsive'],
835 backdropFilter: ['responsive'],
836 backdropGrayscale: ['responsive'],
837 backdropHueRotate: ['responsive'],
838 backdropInvert: ['responsive'],
839 backdropOpacity: ['responsive'],
840 backdropSaturate: ['responsive'],
841 backdropSepia: ['responsive'],
842 backgroundAttachment: ['responsive'],
843 backgroundBlendMode: ['responsive'],
844 backgroundClip: ['responsive'],
845 backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
846 backgroundImage: ['responsive'],
847 backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
848 backgroundPosition: ['responsive'],
849 backgroundRepeat: ['responsive'],
850 backgroundSize: ['responsive'],
851 backgroundOrigin: ['responsive'],
852 blur: ['responsive'],
853 borderCollapse: ['responsive'],
854 borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
855 borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
856 borderRadius: ['responsive'],
857 borderStyle: ['responsive'],
858 borderWidth: ['responsive'],
859 boxDecorationBreak: ['responsive'],
860 boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
861 boxSizing: ['responsive'],
862 brightness: ['responsive'],
863 clear: ['responsive'],
864 container: ['responsive'],
865 contrast: ['responsive'],
866 cursor: ['responsive'],
867 display: ['responsive'],
868 divideColor: ['responsive', 'dark'],
869 divideOpacity: ['responsive', 'dark'],
870 divideStyle: ['responsive'],
871 divideWidth: ['responsive'],
872 dropShadow: ['responsive'],
873 fill: ['responsive'],
874 filter: ['responsive'],
875 flex: ['responsive'],
876 flexDirection: ['responsive'],
877 flexGrow: ['responsive'],
878 flexShrink: ['responsive'],
879 flexWrap: ['responsive'],
880 float: ['responsive'],
881 fontFamily: ['responsive'],
882 fontSize: ['responsive'],
883 fontSmoothing: ['responsive'],
884 fontStyle: ['responsive'],
885 fontVariantNumeric: ['responsive'],
886 fontWeight: ['responsive'],
887 gap: ['responsive'],
888 gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
889 grayscale: ['responsive'],
890 gridAutoColumns: ['responsive'],
891 gridAutoFlow: ['responsive'],
892 gridAutoRows: ['responsive'],
893 gridColumn: ['responsive'],
894 gridColumnEnd: ['responsive'],
895 gridColumnStart: ['responsive'],
896 gridRow: ['responsive'],
897 gridRowEnd: ['responsive'],
898 gridRowStart: ['responsive'],
899 gridTemplateColumns: ['responsive'],
900 gridTemplateRows: ['responsive'],
901 height: ['responsive'],
902 hueRotate: ['responsive'],
903 inset: ['responsive'],
904 invert: ['responsive'],
905 isolation: ['responsive'],
906 justifyContent: ['responsive'],
907 justifyItems: ['responsive'],
908 justifySelf: ['responsive'],
909 letterSpacing: ['responsive'],
910 lineHeight: ['responsive'],
911 listStylePosition: ['responsive'],
912 listStyleType: ['responsive'],
913 margin: ['responsive'],
914 maxHeight: ['responsive'],
915 maxWidth: ['responsive'],
916 minHeight: ['responsive'],
917 minWidth: ['responsive'],
918 mixBlendMode: ['responsive'],
919 objectFit: ['responsive'],
920 objectPosition: ['responsive'],
921 opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
922 order: ['responsive'],
923 outline: ['responsive', 'focus-within', 'focus'],
924 overflow: ['responsive'],
925 overscrollBehavior: ['responsive'],
926 padding: ['responsive'],
927 placeContent: ['responsive'],
928 placeItems: ['responsive'],
929 placeSelf: ['responsive'],
930 placeholderColor: ['responsive', 'dark', 'focus'],
931 placeholderOpacity: ['responsive', 'dark', 'focus'],
932 pointerEvents: ['responsive'],
933 position: ['responsive'],
934 resize: ['responsive'],
935 ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
936 ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
937 ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
938 ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
939 ringWidth: ['responsive', 'focus-within', 'focus'],
940 rotate: ['responsive', 'hover', 'focus'],
941 saturate: ['responsive'],
942 scale: ['responsive', 'hover', 'focus'],
943 sepia: ['responsive'],
944 skew: ['responsive', 'hover', 'focus'],
945 space: ['responsive'],
946 stroke: ['responsive'],
947 strokeWidth: ['responsive'],
948 tableLayout: ['responsive'],
949 textAlign: ['responsive'],
950 textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
951 textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
952 textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
953 textOverflow: ['responsive'],
954 textTransform: ['responsive'],
955 transform: ['responsive'],
956 transformOrigin: ['responsive'],
957 transitionDelay: ['responsive'],
958 transitionDuration: ['responsive'],
959 transitionProperty: ['responsive'],
960 transitionTimingFunction: ['responsive'],
961 translate: ['responsive', 'hover', 'focus'],
962 userSelect: ['responsive'],
963 verticalAlign: ['responsive'],
964 visibility: ['responsive'],
965 whitespace: ['responsive'],
966 width: ['responsive'],
967 wordBreak: ['responsive'],
968 zIndex: ['responsive', 'focus-within', 'focus'],
969 },
970 plugins: [],
971}