|
1 | | - |
2 | 1 | <a href="https://www.material-tailwind.com"> |
3 | 2 | <img width="100%" src="./public/img/material-tailwind-thumbnail.jpg" alt="material-tailwind" style="border-radius: 24px" /> |
4 | 3 | <h1 align="center">Material Tailwind</h1> |
@@ -660,3 +659,91 @@ Please adhere to this project's `CODE_OF_CONDUCT.md`. |
660 | 659 | ## License |
661 | 660 |
|
662 | 661 | [MIT](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE) |
| 662 | + |
| 663 | +## Color mappings |
| 664 | + |
| 665 | +| Custom Class | Tailwind Class | |
| 666 | +| ------------------------------------ | -------------------------------------- | |
| 667 | +| `text-inherit` | `text-current` | |
| 668 | +| `text-foreground` | `text-slate-600` | |
| 669 | +| `text-primary` | `text-slate-800` | |
| 670 | +| `text-black` | `text-slate-800` | |
| 671 | +| `text-foreground/60` | `text-slate-600/60` | |
| 672 | +| `text-primary-foreground` | `text-slate-50` | |
| 673 | +| `text-secondary-foreground` | `text-slate-800` | |
| 674 | +| `text-secondary` | `text-slate-200` | |
| 675 | +| `text-success` | `text-green-500` | |
| 676 | +| `text-error` | `text-red-500` | |
| 677 | +| `text-warning` | `text-amber-500` | |
| 678 | +| `text-warning-foreground` | `text-amber-50` | |
| 679 | +| `text-success-foreground` | `text-green-50` | |
| 680 | +| `text-error-foreground` | `text-red-50` | |
| 681 | +| `text-info-foreground` | `text-blue-50` | |
| 682 | +| `text-info` | `text-blue-500` | |
| 683 | +| `text-foreground/70` | `text-slate-600/70` | |
| 684 | +| `bg-primary/10` | `bg-slate-800/10` | |
| 685 | +| `bg-warning` | `bg-amber-500` | |
| 686 | +| `bg-info` | `bg-blue-500` | |
| 687 | +| `bg-success` | `bg-green-500` | |
| 688 | +| `bg-success/10` | `bg-green-500/10` | |
| 689 | +| `bg-error/10` | `bg-red-500/10` | |
| 690 | +| `bg-primary-light` | `bg-slate-700` | |
| 691 | +| `bg-primary` | `bg-slate-800` | |
| 692 | +| `bg-black` | `bg-slate-950` | |
| 693 | +| `bg-background` | `bg-white` | |
| 694 | +| `bg-secondary` | `bg-slate-200` | |
| 695 | +| `bg-secondary-light` | `bg-slate-100` | |
| 696 | +| `bg-surface-light` | `bg-slate-100` | |
| 697 | +| `bg-surface` | `bg-slate-200` | |
| 698 | +| `bg-surface/20` | `bg-slate-200/20` | |
| 699 | +| `bg-error` | `bg-red-500` | |
| 700 | +| `data-[checked=true]:border-primary` | `data-[checked=true]:border-slate-800` | |
| 701 | +| `data-[checked=true]:bg-primary` | `data-[checked=true]:bg-slate-800` | |
| 702 | +| `before:bg-surface` | `before:bg-slate-200` | |
| 703 | +| `after:border-surface` | `after:border-slate-200` | |
| 704 | +| `after:bg-background` | `after:bg-white` | |
| 705 | +| `checked:before:bg-primary` | `checked:before:bg-slate-800` | |
| 706 | +| `checked:after:border-primary` | `checked:after:border-slate-800` | |
| 707 | +| `active:ring-primary/10` | `active:ring-slate-800/10` | |
| 708 | +| `shadow-black/5` | `shadow-slate-950/5` | |
| 709 | +| `shadow-primary-dark/25` | `shadow-slate-950/25` | |
| 710 | +| `placeholder:text-foreground/60` | `placeholder:text-slate-600/60` | |
| 711 | +| `hover:bg-primary-light` | `hover:bg-slate-700` | |
| 712 | +| `hover:border-primary-light` | `hover:border-slate-700` | |
| 713 | +| `hover:bg-secondary` | `hover:bg-slate-200` | |
| 714 | +| `hover:bg-secondary/10` | `hover:bg-slate-200/10` | |
| 715 | +| `hover:bg-secondary-light` | `hover:bg-slate-100` | |
| 716 | +| `hover:border-secondary-light` | `hover:bg-slate-100` | |
| 717 | +| `hover:border-secondary/10` | `hover:border-slate-600/10` | |
| 718 | +| `hover:border-secondary` | `hover:border-slate-500` | |
| 719 | +| `hover:bg-error/10` | `hover:bg-red-500/10` | |
| 720 | +| `hover:bg-primary/5` | `hover:bg-slate-800/5` | |
| 721 | +| `hover:border-primary/5` | `hover:border-slate-800/5` | |
| 722 | +| `hover:ring-primary/10` | `hover:ring-slate-800/10` | |
| 723 | +| `hover:border-primary` | `hover:border-slate-800` | |
| 724 | +| `hover:bg-error` | `hover:bg-red-500` | |
| 725 | +| `hover:text-error-foreground` | `hover:text-red-50` | |
| 726 | +| `hover:text-black` | `hover:text-slate-800` | |
| 727 | +| `hover:bg-surface` | `hover:bg-slate-200` | |
| 728 | +| `focus:text-black` | `focus:text-slate-800` | |
| 729 | +| `focus:border-primary` | `focus:border-slate-800` | |
| 730 | +| `focus:ring-primary/10` | `focus:ring-slate-800/10` | |
| 731 | +| `focus:bg-surface` | `focus:bg-slate-200` | |
| 732 | +| `border-info` | `border-blue-500` | |
| 733 | +| `border-warning` | `border-amber-500` | |
| 734 | +| `border-primary` | `border-slate-800` | |
| 735 | +| `border-secondary-light` | `border-slate-100` | |
| 736 | +| `border-primary-dark` | `border-slate-950` | |
| 737 | +| `border-primary-light` | `border-slate-700` | |
| 738 | +| `border-surface` | `border-slate-200` | |
| 739 | +| `border-secondary` | `border-slate-200` | |
| 740 | +| `border-success` | `border-green-500` | |
| 741 | +| `border-error` | `border-red-500` | |
| 742 | +| `border-error/10` | `border-red-500/10` | |
| 743 | +| `shadow-black/10` | `shadow-slate-800/10` | |
| 744 | +| `peer-focus:text-black` | `peer-focus:text-slate-800` | |
| 745 | +| `peer-hover:text-black` | `peer-focus:text-slate-800` | |
| 746 | +| `data-[icon-placement=start]` | `` | |
| 747 | +| `data-[icon-placement=end]` | `` | |
| 748 | +| `font-inherit` | `font-sans` | |
| 749 | +| `shadow-none` | `shadow-none` | |
0 commit comments