tailwind1-1  Exercise 1: Your First Build, Checked From the Output
==================================================================

# 1. A new project
mkdir tw-first && cd tw-first
npm init -y
npm install tailwindcss @tailwindcss/cli
mkdir src
echo '@import "tailwindcss";' > src/input.css

# 2. The page: src/index.html
cat > src/index.html <<'HTML'
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-2xl font-semibold">Welcome</h1>
  <a href="#" class="inline-block rounded-md bg-teal-600 px-4 py-2 text-white hover:bg-teal-700">Get started</a>
</body>
</html>
HTML

# 3. Build
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css

# 4. The three checks
grep -A2 "^  \.bg-teal-600" src/output.css
echo ---
grep -F -B1 -A3 'bg-teal-700:hover' src/output.css
echo ---
grep "color-teal" src/output.css | head -3

Output:

≈ tailwindcss v4.3.3

Done in 48ms
  .bg-teal-600 {
    background-color: var(--color-teal-600);
  }
---
  @media (hover: hover) {
    .hover\:bg-teal-700:hover {
      background-color: var(--color-teal-700);
    }
  }
---
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    background-color: var(--color-teal-600);

WHY THIS WORKS AS AN ANSWER
---------------------------
(a) Tailwind found the text "bg-teal-600" in index.html and wrote one rule for it, which reads the colour from a theme variable.
(b) The class you write is hover:bg-teal-700, and the rule's selector is .hover\:bg-teal-700:hover (the colon is escaped). Tailwind wraps every hover rule in
@media (hover: hover), a media query that is only true where the main input device can really hover, so touch screens skip the hover styling.
(c) --color-teal-600 and --color-teal-700 are in the theme layer because the page uses them; the third grep line is the rule that uses the first one.
The rest of the default palette (hundreds of colour shades) is not in the file. The page uses nine classes and the utilities layer contains nine rules
(eight, plus the hover rule).