À propos Tailwind CSS
Tailwind CSS embarque une palette par défaut de dix familles du slate au zinc, plus le rose, chacune avec des nuances de 50 à 950. Les couleurs vivent dans le thème et peuvent être étendues par des valeurs arbitraires à la compilation.
Utilisation
Utilisez des utilitaires comme bg-brand-500 ou étendez theme.colors dans tailwind.config pour ajouter vos propres échelles. Les nuances 500 à 700 conviennent le mieux au texte, aux bordures et aux anneaux de focus.
Documentation officielle ↗
Red
#FB2C36
Nuances
50 #FEF 100 #FFE 200 #FFC 300 #FFA 400 #FF6 500 #FB2 600 #E70 700 #C10 800 #9F0 900 #821 950 #460
Orange
#FF6900
Nuances
50 #FFF 100 #FFE 200 #FFD 300 #FFB 400 #FF8 500 #FF6 600 #F54 700 #CA3 800 #9F2 900 #7E2 950 #441
Amber
#FE9A00
Nuances
50 #FFF 100 #FEF 200 #FEE 300 #FFD 400 #FFB 500 #FE9 600 #E17 700 #BB4 800 #973 900 #7B3 950 #461
Yellow
#F0B100
Nuances
50 #FEF 100 #FEF 200 #FFF 300 #FFD 400 #FDC 500 #F0B 600 #D08 700 #A65 800 #894 900 #733 950 #432
Lime
#7CCF00
Nuances
50 #F7F 100 #ECF 200 #D8F 300 #BBF 400 #9AE 500 #7CC 600 #5EA 700 #497 800 #3C6 900 #355 950 #192
Green
#00C950
Nuances
50 #F0F 100 #DCF 200 #B9F 300 #7BF 400 #05D 500 #00C 600 #00A 700 #008 800 #016 900 #0D5 950 #032
Emerald
#00BC7D
Nuances
50 #ECF 100 #D0F 200 #A4F 300 #5EE 400 #00D 500 #00B 600 #009 700 #007 800 #006 900 #004 950 #002
Teal
#00BBA7
Nuances
50 #F0F 100 #CBF 200 #96F 300 #46E 400 #00D 500 #00B 600 #009 700 #007 800 #005 900 #0B4 950 #022
Cyan
#00B8DB
Nuances
50 #ECF 100 #CEF 200 #A2F 300 #53E 400 #00D 500 #00B 600 #009 700 #007 800 #005 900 #104 950 #053
Sky
#00A6F4
Nuances
50 #F0F 100 #DFF 200 #B8E 300 #74D 400 #00B 500 #00A 600 #008 700 #006 800 #005 900 #024 950 #052
Blue
#2B7FFF
Nuances
50 #EFF 100 #DBE 200 #BED 300 #8EC 400 #51A 500 #2B7 600 #155 700 #144 800 #193 900 #1C3 950 #162
Indigo
#615FFF
Nuances
50 #EEF 100 #E0E 200 #C6D 300 #A3B 400 #7C8 500 #615 600 #4F3 700 #432 800 #372 900 #312 950 #1E1
Violet
#8E51FF
Nuances
50 #F5F 100 #EDE 200 #DDD 300 #C4B 400 #A68 500 #8E5 600 #7F2 700 #700 800 #5D0 900 #4D1 950 #2F0
Purple
#AD46FF
Nuances
50 #FAF 100 #F3E 200 #E9D 300 #DAB 400 #C27 500 #AD4 600 #981 700 #820 800 #6E1 900 #591 950 #3C0
Fuchsia
#E12AFB
Nuances
50 #FDF 100 #FAE 200 #F6C 300 #F4A 400 #ED6 500 #E12 600 #C80 700 #A80 800 #8A0 900 #721 950 #4B0
Pink
#F6339A
Nuances
50 #FDF 100 #FCE 200 #FCC 300 #FDA 400 #FB6 500 #F63 600 #E60 700 #C60 800 #A30 900 #861 950 #510
Rose
#FF2056
Nuances
50 #FFF 100 #FFE 200 #FFC 300 #FFA 400 #FF6 500 #FF2 600 #EC0 700 #C70 800 #A50 900 #8B0 950 #4D0
Slate
#62748E
Nuances
50 #F8F 100 #F1F 200 #E2E 300 #CAD 400 #90A 500 #627 600 #455 700 #314 800 #1D2 900 #0F1 950 #020
Gray
#6A7282
Nuances
50 #F9F 100 #F3F 200 #E5E 300 #D1D 400 #99A 500 #6A7 600 #4A5 700 #364 800 #1E2 900 #101 950 #030
Zinc
#71717B
Nuances
50 #FAF 100 #F4F 200 #E4E 300 #D4D 400 #9F9 500 #717 600 #525 700 #3F3 800 #272 900 #181 950 #090
Neutral
#737373
Nuances
50 #FAF 100 #F5F 200 #E5E 300 #D4D 400 #A1A 500 #737 600 #525 700 #404 800 #262 900 #171 950 #0A0
Stone
#79716B
Nuances
50 #FAF 100 #F5F 200 #E7E 300 #D6D 400 #A6A 500 #797 600 #575 700 #444 800 #292 900 #1C1 950 #0C0
Mauve
#79697B
Nuances
50 #FAF 100 #F3F 200 #E7E 300 #D7D 400 #A89 500 #796 600 #594 700 #463 800 #2A2 900 #1D1 950 #0C0
Olive
#7C7C67
Nuances
50 #FBF 100 #F4F 200 #E8E 300 #D8D 400 #ABA 500 #7C7 600 #5B5 700 #474 800 #2B2 900 #1D1 950 #0C0
Mist
#67787C
Nuances
50 #F9F 100 #F1F 200 #E3E 300 #D0D 400 #9CA 500 #677 600 #4B5 700 #394 800 #222 900 #161 950 #090
Taupe
#7C6D67
Nuances
50 #FBF 100 #F3F 200 #E8E 300 #D8D 400 #ABA 500 #7C6 600 #5B4 700 #473 800 #2B2 900 #1D1 950 #0C0
Aucune couleur correspondante
Source: Tailwind CSS v4 · theme.css
