Color Mixin
Tailwind is filled with lots of beautiful colors to be used on any application to make it look awesome.
Default Colors from Color Pallete
In addition to these default colors you will be able to access all the custom colors you added on the tailwind.config.json file. And yes all the colors will also have their onDark variants.
| Extension | Dark Mode |
|---|---|
| .black | .onDarkBlack |
| .white | .onDarkWhite |
| .transparent | .onDarkTransparent |
| .gray | .onDarkGray |
| .gray50 | .onDarkGray50 |
| .gray100 | .onDarkGray100 |
| .gray200 | .onDarkGray200 |
| .gray300 | .onDarkGray300 |
| .gray400 | .onDarkGray400 |
| .gray500 | .onDarkGray500 |
| .gray600 | .onDarkGray600 |
| .gray700 | .onDarkGray700 |
| .gray800 | .onDarkGray800 |
| .gray900 | .onDarkGray900 |
| .blueGray | .onDarkBlueGray |
| .blueGray50 | .onDarkBlueGray50 |
| .blueGray100 | .onDarkBlueGray100 |
| .blueGray200 | .onDarkBlueGray200 |
| .blueGray300 | .onDarkBlueGray300 |
| .blueGray400 | .onDarkBlueGray400 |
| .blueGray500 | .onDarkBlueGray500 |
| .blueGray600 | .onDarkBlueGray600 |
| .blueGray700 | .onDarkBlueGray700 |
| .blueGray800 | .onDarkBlueGray800 |
| .blueGray900 | .onDarkBlueGray900 |
| .coolGray | .onDarkCoolGray |
| .coolGray50 | .onDarkCoolGray50 |
| .coolGray100 | .onDarkCoolGray100 |
| .coolGray200 | .onDarkCoolGray200 |
| .coolGray300 | .onDarkCoolGray300 |
| .coolGray400 | .onDarkCoolGray400 |
| .coolGray500 | .onDarkCoolGray500 |
| .coolGray600 | .onDarkCoolGray600 |
| .coolGray700 | .onDarkCoolGray700 |
| .coolGray800 | .onDarkCoolGray800 |
| .coolGray900 | .onDarkCoolGray900 |
| .trueGray | .onDarkTrueGray |
| .trueGray50 | .onDarkTrueGray50 |
| .trueGray100 | .onDarkTrueGray100 |
| .trueGray200 | .onDarkTrueGray200 |
| .trueGray300 | .onDarkTrueGray300 |
| .trueGray400 | .onDarkTrueGray400 |
| .trueGray500 | .onDarkTrueGray500 |
| .trueGray600 | .onDarkTrueGray600 |
| .trueGray700 | .onDarkTrueGray700 |
| .trueGray800 | .onDarkTrueGray800 |
| .trueGray900 | .onDarkTrueGray900 |
| .warmGray | .onDarkWarmGray |
| .warmGray50 | .onDarkWarmGray50 |
| .warmGray100 | .onDarkWarmGray100 |
| .warmGray200 | .onDarkWarmGray200 |
| .warmGray300 | .onDarkWarmGray300 |
| .warmGray400 | .onDarkWarmGray400 |
| .warmGray500 | .onDarkWarmGray500 |
| .warmGray600 | .onDarkWarmGray600 |
| .warmGray700 | .onDarkWarmGray700 |
| .warmGray800 | .onDarkWarmGray800 |
| .warmGray900 | .onDarkWarmGray900 |
| .red | .onDarkRed |
| .red50 | .onDarkRed50 |
| .red100 | .onDarkRed100 |
| .red200 | .onDarkRed200 |
| .red300 | .onDarkRed300 |
| .red400 | .onDarkRed400 |
| .red500 | .onDarkRed500 |
| .red600 | .onDarkRed600 |
| .red700 | .onDarkRed700 |
| .red800 | .onDarkRed800 |
| .red900 | .onDarkRed900 |
| .orange | .onDarkOrange |
| .orange50 | .onDarkOrange50 |
| .orange100 | .onDarkOrange100 |
| .orange200 | .onDarkOrange200 |
| .orange300 | .onDarkOrange300 |
| .orange400 | .onDarkOrange400 |
| .orange500 | .onDarkOrange500 |
| .orange600 | .onDarkOrange600 |
| .orange700 | .onDarkOrange700 |
| .orange800 | .onDarkOrange800 |
| .orange900 | .onDarkOrange900 |
| .amber | .onDarkAmber |
| .amber50 | .onDarkAmber50 |
| .amber100 | .onDarkAmber100 |
| .amber200 | .onDarkAmber200 |
| .amber300 | .onDarkAmber300 |
| .amber400 | .onDarkAmber400 |
| .amber500 | .onDarkAmber500 |
| .amber600 | .onDarkAmber600 |
| .amber700 | .onDarkAmber700 |
| .amber800 | .onDarkAmber800 |
| .amber900 | .onDarkAmber900 |
| .yellow | .onDarkYellow |
| .yellow50 | .onDarkYellow50 |
| .yellow100 | .onDarkYellow100 |
| .yellow200 | .onDarkYellow200 |
| .yellow300 | .onDarkYellow300 |
| .yellow400 | .onDarkYellow400 |
| .yellow500 | .onDarkYellow500 |
| .yellow600 | .onDarkYellow600 |
| .yellow700 | .onDarkYellow700 |
| .yellow800 | .onDarkYellow800 |
| .yellow900 | .onDarkYellow900 |
| .lime | .onDarkLime |
| .lime50 | .onDarkLime50 |
| .lime100 | .onDarkLime100 |
| .lime200 | .onDarkLime200 |
| .lime300 | .onDarkLime300 |
| .lime400 | .onDarkLime400 |
| .lime500 | .onDarkLime500 |
| .lime600 | .onDarkLime600 |
| .lime700 | .onDarkLime700 |
| .lime800 | .onDarkLime800 |
| .lime900 | .onDarkLime900 |
| .green | .onDarkGreen |
| .green50 | .onDarkGreen50 |
| .green100 | .onDarkGreen100 |
| .green200 | .onDarkGreen200 |
| .green300 | .onDarkGreen300 |
| .green400 | .onDarkGreen400 |
| .green500 | .onDarkGreen500 |
| .green600 | .onDarkGreen600 |
| .green700 | .onDarkGreen700 |
| .green800 | .onDarkGreen800 |
| .green900 | .onDarkGreen900 |
| .emerald | .onDarkEmerald |
| .emerald50 | .onDarkEmerald50 |
| .emerald100 | .onDarkEmerald100 |
| .emerald200 | .onDarkEmerald200 |
| .emerald300 | .onDarkEmerald300 |
| .emerald400 | .onDarkEmerald400 |
| .emerald500 | .onDarkEmerald500 |
| .emerald600 | .onDarkEmerald600 |
| .emerald700 | .onDarkEmerald700 |
| .emerald800 | .onDarkEmerald800 |
| .emerald900 | .onDarkEmerald900 |
| .teal | .onDarkTeal |
| .teal50 | .onDarkTeal50 |
| .teal100 | .onDarkTeal100 |
| .teal200 | .onDarkTeal200 |
| .teal300 | .onDarkTeal300 |
| .teal400 | .onDarkTeal400 |
| .teal500 | .onDarkTeal500 |
| .teal600 | .onDarkTeal600 |
| .teal700 | .onDarkTeal700 |
| .teal800 | .onDarkTeal800 |
| .teal900 | .onDarkTeal900 |
| .cyan | .onDarkCyan |
| .cyan50 | .onDarkCyan50 |
| .cyan100 | .onDarkCyan100 |
| .cyan200 | .onDarkCyan200 |
| .cyan300 | .onDarkCyan300 |
| .cyan400 | .onDarkCyan400 |
| .cyan500 | .onDarkCyan500 |
| .cyan600 | .onDarkCyan600 |
| .cyan700 | .onDarkCyan700 |
| .cyan800 | .onDarkCyan800 |
| .cyan900 | .onDarkCyan900 |
| .lightBlue | .onDarkLightBlue |
| .lightBlue50 | .onDarkLightBlue50 |
| .lightBlue100 | .onDarkLightBlue100 |
| .lightBlue200 | .onDarkLightBlue200 |
| .lightBlue300 | .onDarkLightBlue300 |
| .lightBlue400 | .onDarkLightBlue400 |
| .lightBlue500 | .onDarkLightBlue500 |
| .lightBlue600 | .onDarkLightBlue600 |
| .lightBlue700 | .onDarkLightBlue700 |
| .lightBlue800 | .onDarkLightBlue800 |
| .lightBlue900 | .onDarkLightBlue900 |
| .blue | .onDarkBlue |
| .blue50 | .onDarkBlue50 |
| .blue100 | .onDarkBlue100 |
| .blue200 | .onDarkBlue200 |
| .blue300 | .onDarkBlue300 |
| .blue400 | .onDarkBlue400 |
| .blue500 | .onDarkBlue500 |
| .blue600 | .onDarkBlue600 |
| .blue700 | .onDarkBlue700 |
| .blue800 | .onDarkBlue800 |
| .blue900 | .onDarkBlue900 |
| .indigo | .onDarkIndigo |
| .indigo50 | .onDarkIndigo50 |
| .indigo100 | .onDarkIndigo100 |
| .indigo200 | .onDarkIndigo200 |
| .indigo300 | .onDarkIndigo300 |
| .indigo400 | .onDarkIndigo400 |
| .indigo500 | .onDarkIndigo500 |
| .indigo600 | .onDarkIndigo600 |
| .indigo700 | .onDarkIndigo700 |
| .indigo800 | .onDarkIndigo800 |
| .indigo900 | .onDarkIndigo900 |
| .violet | .onDarkViolet |
| .violet50 | .onDarkViolet50 |
| .violet100 | .onDarkViolet100 |
| .violet200 | .onDarkViolet200 |
| .violet300 | .onDarkViolet300 |
| .violet400 | .onDarkViolet400 |
| .violet500 | .onDarkViolet500 |
| .violet600 | .onDarkViolet600 |
| .violet700 | .onDarkViolet700 |
| .violet800 | .onDarkViolet800 |
| .violet900 | .onDarkViolet900 |
| .purple | .onDarkPurple |
| .purple50 | .onDarkPurple50 |
| .purple100 | .onDarkPurple100 |
| .purple200 | .onDarkPurple200 |
| .purple300 | .onDarkPurple300 |
| .purple400 | .onDarkPurple400 |
| .purple500 | .onDarkPurple500 |
| .purple600 | .onDarkPurple600 |
| .purple700 | .onDarkPurple700 |
| .purple800 | .onDarkPurple800 |
| .purple900 | .onDarkPurple900 |
| .fuchsia | .onDarkFuchsia |
| .fuchsia50 | .onDarkFuchsia50 |
| .fuchsia100 | .onDarkFuchsia100 |
| .fuchsia200 | .onDarkFuchsia200 |
| .fuchsia300 | .onDarkFuchsia300 |
| .fuchsia400 | .onDarkFuchsia400 |
| .fuchsia500 | .onDarkFuchsia500 |
| .fuchsia600 | .onDarkFuchsia600 |
| .fuchsia700 | .onDarkFuchsia700 |
| .fuchsia800 | .onDarkFuchsia800 |
| .fuchsia900 | .onDarkFuchsia900 |
| .pink | .onDarkPink |
| .pink50 | .onDarkPink50 |
| .pink100 | .onDarkPink100 |
| .pink200 | .onDarkPink200 |
| .pink300 | .onDarkPink300 |
| .pink400 | .onDarkPink400 |
| .pink500 | .onDarkPink500 |
| .pink600 | .onDarkPink600 |
| .pink700 | .onDarkPink700 |
| .pink800 | .onDarkPink800 |
| .pink900 | .onDarkPink900 |
| .rose | .onDarkRose |
| .rose50 | .onDarkRose50 |
| .rose100 | .onDarkRose100 |
| .rose200 | .onDarkRose200 |
| .rose300 | .onDarkRose300 |
| .rose400 | .onDarkRose400 |
| .rose500 | .onDarkRose500 |
| .rose600 | .onDarkRose600 |
| .rose700 | .onDarkRose700 |
| .rose800 | .onDarkRose800 |
| .rose900 | .onDarkRose900 |