tailwind-dark-aware
GitHub
Toggle dark
Divide colour
divide-red-700 dark:divide-red-300
hello
world
this
is
flexbox
divide-daw-red-700
hello
world
this
is
flexbox
Border colour
border-red-700 dark:border-red-300
border-daw-red-700
Background colour
bg-red-200 dark:bg-red-800
bg-daw-red-200
Gradient colour
from-red-200 via-green-200 to-blue-200 dark:from-red-800 dark:via-green-800 dark:to-blue-800
from-daw-red-200 via-daw-green-200 to-daw-blue-200
Gradient colour (with transparency)
from-red-200 dark:from-red-800
from-daw-red-200
SVG fill colour
fill-red-200 dark:fill-red-800
fill-daw-red-200
SVG stroke colour
stroke-red-700 dark:stroke-red-300
stroke-daw-red-700
Text colour
text-red-700 dark:text-red-300
hello world
text-daw-red-700
hello world
Text decoration colour
decoration-red-700 dark:decoration-red-300
hello world
decoration-daw-red-700
hello world
Placeholder colour
placeholder-red-700 dark:placeholder-red-300
placeholder-daw-red-700
Caret colour
caret-red-700 dark:caret-red-300
caret-daw-red-700
Accent colour
accent-red-700 dark:accent-red-300
Checkbox
accent-daw-red-700
Checkbox
Box shadow colour
shadow-red-200 dark:shadow-red-800
shadow-daw-red-200
Outline colour
outline-red-700 dark:outline-red-300
outline-daw-red-700
Ring colour and ring offset colour
ring-red-700 ring-offset-blue-700 dark:ring-red-300 dark:ring-offset-blue-300
ring-daw-red-700 ring-offset-daw-blue-700