Understanding Light / Dark Mode in Tailwind

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

Here is the sample:

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    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?

Solution

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.