Как настроить селектор темы в Tailwind-CSS

Вы можете рассмотреть возможность использования плагина Tailwind для регистрации пользовательских статических вариантов. Например, если light должен быть идентифицирован каким-то родительским light классом, вы можете сделать:

const plugin = require('tailwindcss/plugin')

module.exports = {
  // …
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('light', '.light &');
    }),
  ],
};

Это позволит вам использовать имена классов, например light:bg-red-300, которые будут генерировать CSS, например:

.light .light\:bg-red-300 {
  …
}

Или, если вы хотите противоположность dark: с его версией медиа-запроса, вы можете сделать:

const plugin = require('tailwindcss/plugin')

module.exports = {
  // …
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('light', '@media (prefers-color-scheme: light)');
    }),
  ],
};

Что будет генерировать:

@media (prefers-color-scheme: light) {
  .light\:bg-red-300 {
    …
  }
}

Хотя на самом деле, если вам нужен вариант, который применяется только тогда, когда «не темно», вы могли бы немного переработать логику своих классов:

<div class = "dark:bg-black bg-red-300 py-6">