tailwind1-9  Exercise 1: A Brand Palette Instead of Tailwind's
==============================================================

input.css:

  @import "tailwindcss";

  @font-face {
    font-family: "MyDisplay";
    src: url("./fonts/mydisplay.woff2");        /* your own font file */
  }

  @theme {
    --color-*: initial;                          /* remove every default colour ... */
    --color-white: #fff;                         /* ... then add back only what you want */
    --color-black: #000;
    --color-brand-50: oklch(0.97 0.02 178);
    --color-brand-500: oklch(0.72 0.11 178);
    --color-brand-900: oklch(0.32 0.06 178);
    --font-display: "MyDisplay", serif;
    --radius-pill: 9999px;
  }

page.html:

  <button id="b" class="rounded-pill bg-brand-500 px-4 py-2 font-display text-white">Brand</button>
  <div id="blue" class="bg-blue-500 size-4"></div>
  <div id="red" class="text-red-500">x</div>
  <div id="plain">plain text</div>

Build, then check the compiled file (the first two lines count how many rules exist for each class):

  npx @tailwindcss/cli -i input.css -o output.css
  grep -c "^  \.bg-blue-500 {" output.css
  grep -c "^  \.text-red-500 {" output.css
  sed -n '/^@layer theme {/,/^}/p' output.css | grep -- "--color"

Output (measured, Tailwind 4.3.3):

  0
  0
      --color-white: #fff;
      --color-brand-500: oklch(0.72 0.11 178);

In the browser (headless Chrome):

  button background        oklch(0.72 0.11 178)           (brand-500)
  button radius            far larger than the button     (a pill: 9999px)
  button font-family       MyDisplay, serif
  fonts the browser loaded ["MyDisplay"]
  bg-blue-500 applied?     false  (the box has no background)
  text-red-500 colour      rgb(0, 0, 0)  (the same black as plain text)
  plain text colour        rgb(0, 0, 0)

WHY THIS WORKS AS AN ANSWER
---------------------------
--color-*: initial clears the whole colour namespace, so Tailwind no longer knows what "blue-500" or "red-500" mean and generates nothing for those classes: zero rules, and the elements simply have no
colour (a typo or a leftover default colour fails visibly instead of slipping through). The variables you add after it (white, black, brand shades) create the classes bg-brand-500, text-white and so on.
Only the colours actually used appear in the theme layer of the output (white and brand-500); brand-50, brand-900 and black are defined but unused, so they are not written. If you need them as plain CSS variables
(for JavaScript or hand-written CSS) use @theme static instead.
The font needs two parts: @font-face outside @theme loads the file under the name "MyDisplay", and --font-display inside @theme makes the font-display class. The browser reporting MyDisplay as loaded confirms the
file was found; a misspelled name would have silently given you the plain serif fallback. rounded-pill reads --radius-pill, which is large enough to round both ends completely.