Tailwindcss Quick Start Guide

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .card {
    @apply
    m-10 rounded-lg bg-white px-6 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-black
  }
}

index.html

<main class="p-5">
  <h1 class="text-center text-lg text-green-400">Hello World</h1>

  <div class="my-4 h-10 w-full rounded-md border-2 border-violet-600 bg-violet-200 p-2">
    <p class="text-center font-mono font-extrabold">Hello Div</p>
  </div>

  <!-- Layouts -->
  <div class="fixed top-0 h-10 w-10 bg-red-500"></div>
  <div class="flex justify-between">
    <div class="h-16 w-16 rounded-full bg-blue-500"></div>
    <div class="h-16 w-16 rounded-full bg-blue-500"></div>
    <div class="h-16 w-16 rounded-full bg-blue-500"></div>
  </div>

  <div class="mt-3 grid grid-cols-3 gap-2">
    <div class="h-12 bg-violet-500"></div>
    <div class="h-12 bg-violet-500"></div>
    <div class="h-12 bg-violet-500"></div>
  </div>

  <div class="hidden md:block">
    <p>I will appear for device resolution > 768px</p>
  </div>
  <div class="hidden max-md:block">
    <p>I will appear for device resolution < 768px</p>
  </div>

  <button class="my-2 rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-blue-300 active:bg-blue-800">Click Me</button>

  <ul class="my-2 space-y-2">
    <li class="bg-white p-2 first:bg-yellow-100">Item 1</li>
    <li class="bg-white p-2 first:bg-yellow-100 odd:bg-green-400 even:bg-blue-400">Item 2</li>
    <li class="bg-white p-2 first:bg-yellow-100 odd:bg-green-400 even:bg-blue-400">Item 2</li>
    <li class="bg-white p-2 first:bg-yellow-100 odd:bg-green-400 even:bg-blue-400">Item 2</li>
    <li class="bg-white p-2 first:bg-yellow-100 odd:bg-green-400 even:bg-blue-400">Item 2</li>
  </ul>

  <!-- Theme Dark -->
  <div class="card">
    <h3 class="text-base font-medium tracking-tight text-slate-900 dark:text-white">Text Element</h3>
    <p class="mt-2 text-sm text-slate-500 dark:text-blue-100">Paragraph Element</p>

    <button id="toggleDark" class="mt-8 rounded-md bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900" onclick="document.body.classList.toggle('dark')">Toggle Dark Mode</button>

    
  </div>
  <p class="text-2xl text-chestnut bg-[#fff] p-2">Chestnut Color</p>


  <!-- Custom Styles -->











  <!-- / To showcase the demo of dark theme. Copy paste :) -->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      const toggleDark = document.getElementById('toggleDark')
      toggleDark.addEventListener('click', function() {
        if(document.documentElement.classList.includes('dark')) {
          document.documentElement.classList.remove('dark')
        }
        else {
          document.documentElement.classList.add('dark')
        }
        alert("click!")
      });
    });
  </script>
</main>

tailwind.css.config

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        chestnut : '#973F29'
      }
    },
  },
  plugins: [],
}

You can easily try it out here
TailwindPlay