CODEWITHSUNDEEP
tailwind-csstailwind-in-jstailwind-variants
Revan99
Revan99

Reputation: 446

How to add custom theme to tailwind css besides dark and ligth

I want to add a reader mode which is different from light and dark for example

<div class="text-white dark:text-black reader:text-yellow-100"><div>

Upvotes: -1

Views: 439

Answers (1)

Wongjn
Wongjn

Reputation: 24408

You could consider creating a Tailwind plugin that adds a new variant called reader that modifies a selector for when it should apply. For example, if reader: should apply when a parent element has a reader class:

tailwind.config = {
  darkMode: 'class',
  plugins: [
    tailwind.plugin(({ addVariant }) => {
      addVariant('reader', '.reader &');
    }),
  ],
};
<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="text-white dark:text-black reader:text-yellow-100">Foo</div>

<div class="reader">
  <div class="text-white dark:text-black reader:text-yellow-100">Foo</div>
<div>

<div class="dark">
  <div class="text-white dark:text-black reader:text-yellow-100">Foo</div>
<div>

Upvotes: 2

Related Questions