Tailwind CSS plugin to generate dark variant.
npm install tailwind-dark --save-devplugins: [
require('tailwind-dark'),
// ...
],By default the dark variant is not enabled to none of the tailwindcss utilities.
To use the dark variant add it at the end of any utility you want to use it with.
You can toggle dark using the class theme-dark at the most parent element of your component
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'dark'],
// ...
},This plugin generates the following utilities:
.theme-dark .dark\:bg-white {
--bg-opacity: 1;
background-color: #ffffff;
background-color: rgba(255, 255, 255, var(--bg-opacity));
}
.theme-dark .dark\:bg-black {
--bg-opacity: 1;
background-color: #000000;
background-color: rgba(0, 0, 0, var(--bg-opacity));
}
...<div>
<div class="grid grid-cols-2 gap-10">
<div class="h-60 bg-gray-100 dark:bg-gray-900">
</div>
<div class="h-60 bg-gray-900 dark:bg-gray-100">
</div>
</div>
</div>
To active the dark mode use the theme-dark on the parent element of your component.
<div class="theme-dark">
<div class="grid grid-cols-2 gap-10">
<div class="h-60 bg-gray-100 dark:bg-gray-900">
</div>
<div class="h-60 bg-gray-900 dark:bg-gray-100">
</div>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent