This plugin is inspired by tailwindcss-dark-mode and enables you to have the sepia attribute and be able to implement sepia-mode in tailwind CSS
npm install tailwindcss-sepia-mode --save-dev
Add the plugin to the plugins array in your Tailwind configuration.
plugins: [
require('tailwindcss-sepia-mode')()
]Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you.
Variants for sepia mode are based on Tailwind's own variants...
sepiasepia-hoversepia-focussepia-activesepia-group-hoversepia-focus-withinsepia-evensepia-oddsepia-placeholder
... and are used in the same way.
<div class="bg-white sepia:bg-orange-200">
<p class="text-black sepia:text-gray">
My eyes are grateful.
<a class="text-black hover:text-gray-600 sepia:text-orange-800 sepia-hover:text-orange-500">
Learn more
</a>
</p>
</div>As with existing variants such as hover and focus, variants for sepia mode must be enabled in your Tailwind configuration for any utilities that need them.
variants: {
backgroundColor: ['sepia', 'sepia-hover', 'sepia-group-hover', 'sepia-even', 'sepia-odd'],
borderColor: ['sepia', 'sepia-focus', 'sepia-focus-within'],
textColor: ['sepia', 'sepia-hover', 'sepia-active', 'sepia-placeholder']
}By default, .mode-sepia is used as the selector for sepia mode. You can change this by adding the sepiaSelector key to the theme section in your Tailwind configuration.
theme: {
sepiaSelector: '.mode-sepia'
}