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