UNPKG

18.7 kBJavaScriptView Raw
1module.exports = {
2 purge: [],
3 target: 'relaxed',
4 prefix: '',
5 important: false,
6 separator: ':',
7 theme: {
8 screens: {
9 sm: '640px',
10 md: '768px',
11 lg: '1024px',
12 xl: '1280px',
13 },
14 colors: {
15 transparent: 'transparent',
16 current: 'currentColor',
17
18 black: '#000',
19 white: '#fff',
20
21 gray: {
22 100: '#f7fafc',
23 200: '#edf2f7',
24 300: '#e2e8f0',
25 400: '#cbd5e0',
26 500: '#a0aec0',
27 600: '#718096',
28 700: '#4a5568',
29 800: '#2d3748',
30 900: '#1a202c',
31 },
32 red: {
33 100: '#fff5f5',
34 200: '#fed7d7',
35 300: '#feb2b2',
36 400: '#fc8181',
37 500: '#f56565',
38 600: '#e53e3e',
39 700: '#c53030',
40 800: '#9b2c2c',
41 900: '#742a2a',
42 },
43 orange: {
44 100: '#fffaf0',
45 200: '#feebc8',
46 300: '#fbd38d',
47 400: '#f6ad55',
48 500: '#ed8936',
49 600: '#dd6b20',
50 700: '#c05621',
51 800: '#9c4221',
52 900: '#7b341e',
53 },
54 yellow: {
55 100: '#fffff0',
56 200: '#fefcbf',
57 300: '#faf089',
58 400: '#f6e05e',
59 500: '#ecc94b',
60 600: '#d69e2e',
61 700: '#b7791f',
62 800: '#975a16',
63 900: '#744210',
64 },
65 green: {
66 100: '#f0fff4',
67 200: '#c6f6d5',
68 300: '#9ae6b4',
69 400: '#68d391',
70 500: '#48bb78',
71 600: '#38a169',
72 700: '#2f855a',
73 800: '#276749',
74 900: '#22543d',
75 },
76 teal: {
77 100: '#e6fffa',
78 200: '#b2f5ea',
79 300: '#81e6d9',
80 400: '#4fd1c5',
81 500: '#38b2ac',
82 600: '#319795',
83 700: '#2c7a7b',
84 800: '#285e61',
85 900: '#234e52',
86 },
87 blue: {
88 100: '#ebf8ff',
89 200: '#bee3f8',
90 300: '#90cdf4',
91 400: '#63b3ed',
92 500: '#4299e1',
93 600: '#3182ce',
94 700: '#2b6cb0',
95 800: '#2c5282',
96 900: '#2a4365',
97 },
98 indigo: {
99 100: '#ebf4ff',
100 200: '#c3dafe',
101 300: '#a3bffa',
102 400: '#7f9cf5',
103 500: '#667eea',
104 600: '#5a67d8',
105 700: '#4c51bf',
106 800: '#434190',
107 900: '#3c366b',
108 },
109 purple: {
110 100: '#faf5ff',
111 200: '#e9d8fd',
112 300: '#d6bcfa',
113 400: '#b794f4',
114 500: '#9f7aea',
115 600: '#805ad5',
116 700: '#6b46c1',
117 800: '#553c9a',
118 900: '#44337a',
119 },
120 pink: {
121 100: '#fff5f7',
122 200: '#fed7e2',
123 300: '#fbb6ce',
124 400: '#f687b3',
125 500: '#ed64a6',
126 600: '#d53f8c',
127 700: '#b83280',
128 800: '#97266d',
129 900: '#702459',
130 },
131 },
132 spacing: {
133 px: '1px',
134 '0': '0',
135 '1': '0.25rem',
136 '2': '0.5rem',
137 '3': '0.75rem',
138 '4': '1rem',
139 '5': '1.25rem',
140 '6': '1.5rem',
141 '8': '2rem',
142 '10': '2.5rem',
143 '12': '3rem',
144 '16': '4rem',
145 '20': '5rem',
146 '24': '6rem',
147 '32': '8rem',
148 '40': '10rem',
149 '48': '12rem',
150 '56': '14rem',
151 '64': '16rem',
152 },
153 backgroundColor: theme => theme('colors'),
154 backgroundOpacity: theme => theme('opacity'),
155 backgroundPosition: {
156 bottom: 'bottom',
157 center: 'center',
158 left: 'left',
159 'left-bottom': 'left bottom',
160 'left-top': 'left top',
161 right: 'right',
162 'right-bottom': 'right bottom',
163 'right-top': 'right top',
164 top: 'top',
165 },
166 backgroundSize: {
167 auto: 'auto',
168 cover: 'cover',
169 contain: 'contain',
170 },
171 borderColor: theme => ({
172 ...theme('colors'),
173 default: theme('colors.gray.300', 'currentColor'),
174 }),
175 borderOpacity: theme => theme('opacity'),
176 borderRadius: {
177 none: '0',
178 sm: '0.125rem',
179 default: '0.25rem',
180 md: '0.375rem',
181 lg: '0.5rem',
182 full: '9999px',
183 },
184 borderWidth: {
185 default: '1px',
186 '0': '0',
187 '2': '2px',
188 '4': '4px',
189 '8': '8px',
190 },
191 boxShadow: {
192 xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
193 sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
194 default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
195 md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
196 lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
197 xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
198 '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
199 inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
200 outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
201 none: 'none',
202 },
203 container: {},
204 cursor: {
205 auto: 'auto',
206 default: 'default',
207 pointer: 'pointer',
208 wait: 'wait',
209 text: 'text',
210 move: 'move',
211 'not-allowed': 'not-allowed',
212 },
213 divideColor: theme => theme('borderColor'),
214 divideOpacity: theme => theme('borderOpacity'),
215 divideWidth: theme => theme('borderWidth'),
216 fill: {
217 current: 'currentColor',
218 },
219 flex: {
220 '1': '1 1 0%',
221 auto: '1 1 auto',
222 initial: '0 1 auto',
223 none: 'none',
224 },
225 flexGrow: {
226 '0': '0',
227 default: '1',
228 },
229 flexShrink: {
230 '0': '0',
231 default: '1',
232 },
233 fontFamily: {
234 sans: [
235 'system-ui',
236 '-apple-system',
237 'BlinkMacSystemFont',
238 '"Segoe UI"',
239 'Roboto',
240 '"Helvetica Neue"',
241 'Arial',
242 '"Noto Sans"',
243 'sans-serif',
244 '"Apple Color Emoji"',
245 '"Segoe UI Emoji"',
246 '"Segoe UI Symbol"',
247 '"Noto Color Emoji"',
248 ],
249 serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
250 mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
251 },
252 fontSize: {
253 xs: '0.75rem',
254 sm: '0.875rem',
255 base: '1rem',
256 lg: '1.125rem',
257 xl: '1.25rem',
258 '2xl': '1.5rem',
259 '3xl': '1.875rem',
260 '4xl': '2.25rem',
261 '5xl': '3rem',
262 '6xl': '4rem',
263 },
264 fontWeight: {
265 hairline: '100',
266 thin: '200',
267 light: '300',
268 normal: '400',
269 medium: '500',
270 semibold: '600',
271 bold: '700',
272 extrabold: '800',
273 black: '900',
274 },
275 height: theme => ({
276 auto: 'auto',
277 ...theme('spacing'),
278 full: '100%',
279 screen: '100vh',
280 }),
281 inset: {
282 '0': '0',
283 auto: 'auto',
284 },
285 letterSpacing: {
286 tighter: '-0.05em',
287 tight: '-0.025em',
288 normal: '0',
289 wide: '0.025em',
290 wider: '0.05em',
291 widest: '0.1em',
292 },
293 lineHeight: {
294 none: '1',
295 tight: '1.25',
296 snug: '1.375',
297 normal: '1.5',
298 relaxed: '1.625',
299 loose: '2',
300 '3': '.75rem',
301 '4': '1rem',
302 '5': '1.25rem',
303 '6': '1.5rem',
304 '7': '1.75rem',
305 '8': '2rem',
306 '9': '2.25rem',
307 '10': '2.5rem',
308 },
309 listStyleType: {
310 none: 'none',
311 disc: 'disc',
312 decimal: 'decimal',
313 },
314 margin: (theme, { negative }) => ({
315 auto: 'auto',
316 ...theme('spacing'),
317 ...negative(theme('spacing')),
318 }),
319 maxHeight: {
320 full: '100%',
321 screen: '100vh',
322 },
323 maxWidth: (theme, { breakpoints }) => ({
324 none: 'none',
325 xs: '20rem',
326 sm: '24rem',
327 md: '28rem',
328 lg: '32rem',
329 xl: '36rem',
330 '2xl': '42rem',
331 '3xl': '48rem',
332 '4xl': '56rem',
333 '5xl': '64rem',
334 '6xl': '72rem',
335 full: '100%',
336 ...breakpoints(theme('screens')),
337 }),
338 minHeight: {
339 '0': '0',
340 full: '100%',
341 screen: '100vh',
342 },
343 minWidth: {
344 '0': '0',
345 full: '100%',
346 },
347 objectPosition: {
348 bottom: 'bottom',
349 center: 'center',
350 left: 'left',
351 'left-bottom': 'left bottom',
352 'left-top': 'left top',
353 right: 'right',
354 'right-bottom': 'right bottom',
355 'right-top': 'right top',
356 top: 'top',
357 },
358 opacity: {
359 '0': '0',
360 '25': '0.25',
361 '50': '0.5',
362 '75': '0.75',
363 '100': '1',
364 },
365 order: {
366 first: '-9999',
367 last: '9999',
368 none: '0',
369 '1': '1',
370 '2': '2',
371 '3': '3',
372 '4': '4',
373 '5': '5',
374 '6': '6',
375 '7': '7',
376 '8': '8',
377 '9': '9',
378 '10': '10',
379 '11': '11',
380 '12': '12',
381 },
382 padding: theme => theme('spacing'),
383 placeholderColor: theme => theme('colors'),
384 placeholderOpacity: theme => theme('opacity'),
385 space: (theme, { negative }) => ({
386 ...theme('spacing'),
387 ...negative(theme('spacing')),
388 }),
389 stroke: {
390 current: 'currentColor',
391 },
392 strokeWidth: {
393 '0': '0',
394 '1': '1',
395 '2': '2',
396 },
397 textColor: theme => theme('colors'),
398 textOpacity: theme => theme('opacity'),
399 width: theme => ({
400 auto: 'auto',
401 ...theme('spacing'),
402 '1/2': '50%',
403 '1/3': '33.333333%',
404 '2/3': '66.666667%',
405 '1/4': '25%',
406 '2/4': '50%',
407 '3/4': '75%',
408 '1/5': '20%',
409 '2/5': '40%',
410 '3/5': '60%',
411 '4/5': '80%',
412 '1/6': '16.666667%',
413 '2/6': '33.333333%',
414 '3/6': '50%',
415 '4/6': '66.666667%',
416 '5/6': '83.333333%',
417 '1/12': '8.333333%',
418 '2/12': '16.666667%',
419 '3/12': '25%',
420 '4/12': '33.333333%',
421 '5/12': '41.666667%',
422 '6/12': '50%',
423 '7/12': '58.333333%',
424 '8/12': '66.666667%',
425 '9/12': '75%',
426 '10/12': '83.333333%',
427 '11/12': '91.666667%',
428 full: '100%',
429 screen: '100vw',
430 }),
431 zIndex: {
432 auto: 'auto',
433 '0': '0',
434 '10': '10',
435 '20': '20',
436 '30': '30',
437 '40': '40',
438 '50': '50',
439 },
440 gap: theme => theme('spacing'),
441 gridTemplateColumns: {
442 none: 'none',
443 '1': 'repeat(1, minmax(0, 1fr))',
444 '2': 'repeat(2, minmax(0, 1fr))',
445 '3': 'repeat(3, minmax(0, 1fr))',
446 '4': 'repeat(4, minmax(0, 1fr))',
447 '5': 'repeat(5, minmax(0, 1fr))',
448 '6': 'repeat(6, minmax(0, 1fr))',
449 '7': 'repeat(7, minmax(0, 1fr))',
450 '8': 'repeat(8, minmax(0, 1fr))',
451 '9': 'repeat(9, minmax(0, 1fr))',
452 '10': 'repeat(10, minmax(0, 1fr))',
453 '11': 'repeat(11, minmax(0, 1fr))',
454 '12': 'repeat(12, minmax(0, 1fr))',
455 },
456 gridColumn: {
457 auto: 'auto',
458 'span-1': 'span 1 / span 1',
459 'span-2': 'span 2 / span 2',
460 'span-3': 'span 3 / span 3',
461 'span-4': 'span 4 / span 4',
462 'span-5': 'span 5 / span 5',
463 'span-6': 'span 6 / span 6',
464 'span-7': 'span 7 / span 7',
465 'span-8': 'span 8 / span 8',
466 'span-9': 'span 9 / span 9',
467 'span-10': 'span 10 / span 10',
468 'span-11': 'span 11 / span 11',
469 'span-12': 'span 12 / span 12',
470 },
471 gridColumnStart: {
472 auto: 'auto',
473 '1': '1',
474 '2': '2',
475 '3': '3',
476 '4': '4',
477 '5': '5',
478 '6': '6',
479 '7': '7',
480 '8': '8',
481 '9': '9',
482 '10': '10',
483 '11': '11',
484 '12': '12',
485 '13': '13',
486 },
487 gridColumnEnd: {
488 auto: 'auto',
489 '1': '1',
490 '2': '2',
491 '3': '3',
492 '4': '4',
493 '5': '5',
494 '6': '6',
495 '7': '7',
496 '8': '8',
497 '9': '9',
498 '10': '10',
499 '11': '11',
500 '12': '12',
501 '13': '13',
502 },
503 gridTemplateRows: {
504 none: 'none',
505 '1': 'repeat(1, minmax(0, 1fr))',
506 '2': 'repeat(2, minmax(0, 1fr))',
507 '3': 'repeat(3, minmax(0, 1fr))',
508 '4': 'repeat(4, minmax(0, 1fr))',
509 '5': 'repeat(5, minmax(0, 1fr))',
510 '6': 'repeat(6, minmax(0, 1fr))',
511 },
512 gridRow: {
513 auto: 'auto',
514 'span-1': 'span 1 / span 1',
515 'span-2': 'span 2 / span 2',
516 'span-3': 'span 3 / span 3',
517 'span-4': 'span 4 / span 4',
518 'span-5': 'span 5 / span 5',
519 'span-6': 'span 6 / span 6',
520 },
521 gridRowStart: {
522 auto: 'auto',
523 '1': '1',
524 '2': '2',
525 '3': '3',
526 '4': '4',
527 '5': '5',
528 '6': '6',
529 '7': '7',
530 },
531 gridRowEnd: {
532 auto: 'auto',
533 '1': '1',
534 '2': '2',
535 '3': '3',
536 '4': '4',
537 '5': '5',
538 '6': '6',
539 '7': '7',
540 },
541 transformOrigin: {
542 center: 'center',
543 top: 'top',
544 'top-right': 'top right',
545 right: 'right',
546 'bottom-right': 'bottom right',
547 bottom: 'bottom',
548 'bottom-left': 'bottom left',
549 left: 'left',
550 'top-left': 'top left',
551 },
552 scale: {
553 '0': '0',
554 '50': '.5',
555 '75': '.75',
556 '90': '.9',
557 '95': '.95',
558 '100': '1',
559 '105': '1.05',
560 '110': '1.1',
561 '125': '1.25',
562 '150': '1.5',
563 },
564 rotate: {
565 '-180': '-180deg',
566 '-90': '-90deg',
567 '-45': '-45deg',
568 '0': '0',
569 '45': '45deg',
570 '90': '90deg',
571 '180': '180deg',
572 },
573 translate: (theme, { negative }) => ({
574 ...theme('spacing'),
575 ...negative(theme('spacing')),
576 '-full': '-100%',
577 '-1/2': '-50%',
578 '1/2': '50%',
579 full: '100%',
580 }),
581 skew: {
582 '-12': '-12deg',
583 '-6': '-6deg',
584 '-3': '-3deg',
585 '0': '0',
586 '3': '3deg',
587 '6': '6deg',
588 '12': '12deg',
589 },
590 transitionProperty: {
591 none: 'none',
592 all: 'all',
593 default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
594 colors: 'background-color, border-color, color, fill, stroke',
595 opacity: 'opacity',
596 shadow: 'box-shadow',
597 transform: 'transform',
598 },
599 transitionTimingFunction: {
600 linear: 'linear',
601 in: 'cubic-bezier(0.4, 0, 1, 1)',
602 out: 'cubic-bezier(0, 0, 0.2, 1)',
603 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
604 },
605 transitionDuration: {
606 '75': '75ms',
607 '100': '100ms',
608 '150': '150ms',
609 '200': '200ms',
610 '300': '300ms',
611 '500': '500ms',
612 '700': '700ms',
613 '1000': '1000ms',
614 },
615 transitionDelay: {
616 '75': '75ms',
617 '100': '100ms',
618 '150': '150ms',
619 '200': '200ms',
620 '300': '300ms',
621 '500': '500ms',
622 '700': '700ms',
623 '1000': '1000ms',
624 },
625 animation: {
626 none: 'none',
627 spin: 'spin 1s linear infinite',
628 ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
629 pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
630 bounce: 'bounce 1s infinite',
631 },
632 keyframes: {
633 spin: {
634 from: { transform: 'rotate(0deg)' },
635 to: { transform: 'rotate(360deg)' },
636 },
637 ping: {
638 '0%': { transform: 'scale(1)', opacity: '1' },
639 '75%, 100%': { transform: 'scale(2)', opacity: '0' },
640 },
641 pulse: {
642 '0%, 100%': { opacity: '1' },
643 '50%': { opacity: '.5' },
644 },
645 bounce: {
646 '0%, 100%': {
647 transform: 'translateY(-25%)',
648 animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
649 },
650 '50%': {
651 transform: 'translateY(0)',
652 animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
653 },
654 },
655 },
656 },
657 variants: {
658 accessibility: ['responsive', 'focus'],
659 alignContent: ['responsive'],
660 alignItems: ['responsive'],
661 alignSelf: ['responsive'],
662 appearance: ['responsive'],
663 backgroundAttachment: ['responsive'],
664 backgroundColor: ['responsive', 'hover', 'focus'],
665 backgroundOpacity: ['responsive', 'hover', 'focus'],
666 backgroundPosition: ['responsive'],
667 backgroundRepeat: ['responsive'],
668 backgroundSize: ['responsive'],
669 borderCollapse: ['responsive'],
670 borderColor: ['responsive', 'hover', 'focus'],
671 borderOpacity: ['responsive', 'hover', 'focus'],
672 borderRadius: ['responsive'],
673 borderStyle: ['responsive'],
674 borderWidth: ['responsive'],
675 boxShadow: ['responsive', 'hover', 'focus'],
676 boxSizing: ['responsive'],
677 container: ['responsive'],
678 cursor: ['responsive'],
679 display: ['responsive'],
680 divideColor: ['responsive'],
681 divideOpacity: ['responsive'],
682 divideWidth: ['responsive'],
683 fill: ['responsive'],
684 flex: ['responsive'],
685 flexDirection: ['responsive'],
686 flexGrow: ['responsive'],
687 flexShrink: ['responsive'],
688 flexWrap: ['responsive'],
689 float: ['responsive'],
690 clear: ['responsive'],
691 fontFamily: ['responsive'],
692 fontSize: ['responsive'],
693 fontSmoothing: ['responsive'],
694 fontStyle: ['responsive'],
695 fontWeight: ['responsive', 'hover', 'focus'],
696 height: ['responsive'],
697 inset: ['responsive'],
698 justifyContent: ['responsive'],
699 letterSpacing: ['responsive'],
700 lineHeight: ['responsive'],
701 listStylePosition: ['responsive'],
702 listStyleType: ['responsive'],
703 margin: ['responsive'],
704 maxHeight: ['responsive'],
705 maxWidth: ['responsive'],
706 minHeight: ['responsive'],
707 minWidth: ['responsive'],
708 objectFit: ['responsive'],
709 objectPosition: ['responsive'],
710 opacity: ['responsive', 'hover', 'focus'],
711 order: ['responsive'],
712 outline: ['responsive', 'focus'],
713 overflow: ['responsive'],
714 overscrollBehavior: ['responsive'],
715 padding: ['responsive'],
716 placeholderColor: ['responsive', 'focus'],
717 placeholderOpacity: ['responsive', 'focus'],
718 pointerEvents: ['responsive'],
719 position: ['responsive'],
720 resize: ['responsive'],
721 space: ['responsive'],
722 stroke: ['responsive'],
723 strokeWidth: ['responsive'],
724 tableLayout: ['responsive'],
725 textAlign: ['responsive'],
726 textColor: ['responsive', 'hover', 'focus'],
727 textOpacity: ['responsive', 'hover', 'focus'],
728 textDecoration: ['responsive', 'hover', 'focus'],
729 textTransform: ['responsive'],
730 userSelect: ['responsive'],
731 verticalAlign: ['responsive'],
732 visibility: ['responsive'],
733 whitespace: ['responsive'],
734 width: ['responsive'],
735 wordBreak: ['responsive'],
736 zIndex: ['responsive'],
737 gap: ['responsive'],
738 gridAutoFlow: ['responsive'],
739 gridTemplateColumns: ['responsive'],
740 gridColumn: ['responsive'],
741 gridColumnStart: ['responsive'],
742 gridColumnEnd: ['responsive'],
743 gridTemplateRows: ['responsive'],
744 gridRow: ['responsive'],
745 gridRowStart: ['responsive'],
746 gridRowEnd: ['responsive'],
747 transform: ['responsive'],
748 transformOrigin: ['responsive'],
749 scale: ['responsive', 'hover', 'focus'],
750 rotate: ['responsive', 'hover', 'focus'],
751 translate: ['responsive', 'hover', 'focus'],
752 skew: ['responsive', 'hover', 'focus'],
753 transitionProperty: ['responsive'],
754 transitionTimingFunction: ['responsive'],
755 transitionDuration: ['responsive'],
756 transitionDelay: ['responsive'],
757 animation: ['responsive'],
758 },
759 corePlugins: {},
760 plugins: [],
761}