TailwindCSS: How to do a light mode only modification?

Question

I would like to do a light mode only modification of a style.

Unfortunately, it doesn't seem like light: exists.

I know that the default approach is to style the light styles and then override in dark mode.

However, my styles come from a library, so in order to achieve the override I want, I'd have to read the source code of the styling library, and then manually set the dark: value to what it was. Something like light: would make the code much cleaner.

Is there anything like it?

I tried Google, looking for SO and the Tailwind docs, but couldn't find anything like it.

I also couldn't find an "inversion" modifier (e.g. non:dark:).

Answer 1

addVariant is probably your best bet as it does not involve installing any new dependencies. Here's the documentation if you're interested. (Note that you don't actually need to import the plugin function like they do in the examples. You can use an anonymous function instead like I do in the examples below)

TailwindCSS Playground with a working example.

const config: Config = {
  darkMode: ['selector'],
  
  theme: {
    // ...
  },

  plugins: [
    function ({ addVariant }) {
      /**
       * If you have a .light class
       */
      addVariant('light', '.light &')
      
      /**
       * If you only have .dark to work with, simply swap out
       * `html` in the example below with the parent tag where
       * you are applying the .dark class
       */
      addVariant('light', 'html:not(.dark) &')

      /**
       * Uses system default preference.
       */
      addVariant('light', '@media (prefers-color-scheme: light)')
    },
  ],
};

Good luck!