About UnoCSS
UnoCSS is an atomic CSS engine whose preset-mini reuses the Tailwind v3 palette and Windi variants. Colors are generated on demand as utilities with full shade ranges.
How to use
Configure themes in uno.config.ts and use utilities such as text-brand-500. UnoCSS emits only the classes you actually use, keeping the final CSS tiny.
Official documentation ↗
Rose
#F43F5E
Shades
50 #FFF 100 #FFE 200 #FEC 300 #FDA 400 #FB7 500 #F43 600 #E11 700 #BE1 800 #9F1 900 #881 950 #4C0
Pink
#EC4899
Shades
50 #FDF 100 #FCE 200 #FBC 300 #F9A 400 #F47 500 #EC4 600 #DB2 700 #BE1 800 #9D1 900 #831 950 #500
Fuchsia
#D946EF
Shades
50 #FDF 100 #FAE 200 #F5D 300 #F0A 400 #E87 500 #D94 600 #C02 700 #A21 800 #861 900 #701 950 #4A0
Purple
#A855F7
Shades
50 #FAF 100 #F3E 200 #E9D 300 #D8B 400 #C08 500 #A85 600 #933 700 #7E2 800 #6B2 900 #581 950 #3B0
Violet
#8B5CF6
Shades
50 #F5F 100 #EDE 200 #DDD 300 #C4B 400 #A78 500 #8B5 600 #7C3 700 #6D2 800 #5B2 900 #4C1 950 #2E1
Indigo
#6366F1
Shades
50 #EEF 100 #E0E 200 #C7D 300 #A5B 400 #818 500 #636 600 #4F4 700 #433 800 #373 900 #312 950 #1E1
Blue
#3B82F6
Shades
50 #EFF 100 #DBE 200 #BFD 300 #93C 400 #60A 500 #3B8 600 #256 700 #1D4 800 #1E4 900 #1E3 950 #172
Sky
#0EA5E9
Shades
50 #F0F 100 #E0F 200 #BAE 300 #7DD 400 #38B 500 #0EA 600 #028 700 #036 800 #075 900 #0C4 950 #082
Cyan
#06B6D4
Shades
50 #ECF 100 #CFF 200 #A5F 300 #67E 400 #22D 500 #06B 600 #089 700 #0E7 800 #155 900 #164 950 #083
Teal
#14B8A6
Shades
50 #F0F 100 #CCF 200 #99F 300 #5EE 400 #2DD 500 #14B 600 #0D9 700 #0F7 800 #115 900 #134 950 #042
Emerald
#10B981
Shades
50 #ECF 100 #D1F 200 #A7F 300 #6EE 400 #34D 500 #10B 600 #059 700 #047 800 #065 900 #064 950 #022
Green
#22C55E
Shades
50 #F0F 100 #DCF 200 #BBF 300 #86E 400 #4AD 500 #22C 600 #16A 700 #158 800 #166 900 #145 950 #052
Lime
#84CC16
Shades
50 #F7F 100 #ECF 200 #D9F 300 #BEF 400 #A3E 500 #84C 600 #65A 700 #4D7 800 #3F6 900 #365 950 #1A2
Yellow
#EAB308
Shades
50 #FEF 100 #FEF 200 #FEF 300 #FDE 400 #FAC 500 #EAB 600 #CA8 700 #A16 800 #854 900 #713 950 #422
Amber
#F59E0B
Shades
50 #FFF 100 #FEF 200 #FDE 300 #FCD 400 #FBB 500 #F59 600 #D97 700 #B45 800 #924 900 #783 950 #451
Orange
#F97316
Shades
50 #FFF 100 #FFE 200 #FED 300 #FDB 400 #FB9 500 #F97 600 #EA5 700 #C24 800 #9A3 900 #7C2 950 #431
Red
#EF4444
Shades
50 #FEF 100 #FEE 200 #FEC 300 #FCA 400 #F87 500 #EF4 600 #DC2 700 #B91 800 #991 900 #7F1 950 #450
Gray
#6B7280
Shades
50 #F9F 100 #F3F 200 #E5E 300 #D1D 400 #9CA 500 #6B7 600 #4B5 700 #374 800 #1F2 900 #111 950 #030
Slate
#64748B
Shades
50 #F8F 100 #F1F 200 #E2E 300 #CBD 400 #94A 500 #647 600 #475 700 #334 800 #1E2 900 #0F1 950 #020
Zinc
#71717A
Shades
50 #FAF 100 #F4F 200 #E4E 300 #D4D 400 #A1A 500 #717 600 #525 700 #3F3 800 #272 900 #181 950 #090
Neutral
#737373
Shades
50 #FAF 100 #F5F 200 #E5E 300 #D4D 400 #A3A 500 #737 600 #525 700 #404 800 #262 900 #171 950 #0A0
Stone
#78716C
Shades
50 #FAF 100 #F5F 200 #E7E 300 #D6D 400 #A8A 500 #787 600 #575 700 #444 800 #292 900 #1C1 950 #0C0
Light
#F2F2F2
Shades
50 #FDF 100 #FCF 200 #FAF 300 #F8F 400 #F6F 500 #F2F 600 #F1F 700 #E9E 800 #DEE 900 #DDE 950 #D8D
Dark
#1F1F1F
Shades
50 #4A4 100 #3C3 200 #323 300 #2D2 400 #222 500 #1F1 600 #1C1 700 #1B1 800 #181 900 #0F0 950 #080
No matching colors
Source: UnoCSS preset-mini · Tailwind v3 + Windi
