Tailwindcss-sepia-mode NPM

Tailwind CSS Sepia Mode

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

Installation

npm install tailwindcss-sepia-mode --save-dev

Add the plugin to the plugins array in your Tailwind configuration.

plugins: [
  require('tailwindcss-sepia-mode')()
]

Usage

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.

Available Variants

Variants for sepia mode are based on Tailwind's own variants...

sepia
sepia-hover
sepia-focus
sepia-active
sepia-group-hover
sepia-focus-within
sepia-even
sepia-odd
sepia-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>

Enabling Variants

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']
}

Changing the Selector

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'
  }

tailwind tailwindcss tailwindcss-plugin sepia-theme sepia-mode css javascript

tailwindcss

@everything-registry/sub-chunk-2874 @infinitebrahmanuniverse/nolb-tail

1.0.0

5 years ago