Skip to content

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.

ExtensionDark 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

Released under the MIT License.