Media and Feature Queries pada Hover, Focus, dan Other States dalam Tailwind CSS (prefers-color-scheme)

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Masih di Topik yang sama pada Hover, Focus, dan Other States, jika sebelumnya Subtopik tentang Pseudo-Elements, kali ini kita akan membahas mengenai Media and Feature Queries pada Tailwind CSS, khususnya tentang prefers-color-scheme.

Sumber : Tailwindcss.com

The prefers-reduced-motion media query digunakan untuk mendeteksi apakah pengguna menginginkan agar animasi atau gerakan yang tidak penting diminimalkan.

Gunakan varian motion-reduce untuk menerapkan gaya tertentu hanya ketika pengguna memilih pengurangan gerakan :

<div class="bg-white dark:bg-gray-900 ...">
  <!-- ... -->
  <h3 class="text-gray-900 dark:text-white ...">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 ...">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Contoh :

<div class="grid grid-cols-1 sm:grid-cols-2">
  <div class="p-8 pt-7">
    <p class="mb-2 text-sm font-medium text-gray-500">Light mode</p>
    <div
      class="rounded-lg bg-white px-6 py-8 shadow-xl ring-1 ring-gray-900/5"
    >
      <div>
        <span
          class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"
          ><svg
            class="h-6 w-6 text-white"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
            ></path></svg
        ></span>
      </div>
      <div class="mt-5 text-base font-medium tracking-tight text-gray-900">
        Writes upside-down
      </div>
      <p class="mt-2 text-sm text-gray-500">
        The Zero Gravity Pen can be used to write in any orientation,
        including upside-down. It even works in outer space.
      </p>
    </div>
  </div>
  <div
    class="border-l border-l-transparent bg-black/90 p-8 pt-7 dark:border-l-white/10 dark:bg-transparent"
  >
    <p class="mb-2 text-sm font-medium text-gray-400">Dark mode</p>
    <div
      class="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring-1 ring-gray-900/5"
    >
      <div>
        <span
          class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"
          ><svg
            class="h-6 w-6 text-white"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
            ></path></svg
        ></span>
      </div>
      <div class="mt-5 text-base font-medium tracking-tight text-white">
        Writes upside-down
      </div>
      <p class="mt-2 text-sm text-gray-400">
        The Zero Gravity Pen can be used to write in any orientation,
        including upside-down. It even works in outer space.
      </p>
    </div>
  </div>
</div>

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)