Understanding Light / Dark Mode in Tailwind-CodePudding

I am just getting up to speed in Tailwind. I am trying to understand how this CSS actually works.

Here is the sample:

<div >
  <div>
    <span >
      <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 >Writes Upside-Down</h3>
  <p >
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Clearly, the bg-white class is used when the user prefers light mode, and bg_slate-800 is used when the user prefers dark mode.

But I don't get how this is happening. How does dark:bg-slate-800 work? What is the dark: doing?

CodePudding user response：

I followed the install instructions for tailwind, created an HTML document containing the HTML you provided, then ran the command on the install page.

Then I looked at the resulting CSS file.

It contains:

@media (prefers-color-scheme: dark) {
  .dark\:bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity));
  }

dark: isn't doing anything special. It is just part of a class name used in a media query for prefers-color-scheme.