A few things I picked up from the Official Tailwind Documentation

1. Extending and overriding tailwind’s default theme.

@import "tailwindcss";

@theme {
  /* overriding existing theme */
  --font-sans: GT Standard;
  /* adding utility classes for custom fonts  */
  --font-poppins: Poppins, sans-serif;
  /* adding custom colors */
  --color-brand-blue: oklch(0.522 0.175 256);
}

With this in place, Tailwind generates utility classes you can use like this:

<h1 className="text-brand-blue font-poppins">Tailwind CSS</h1>

To override an entire namespace, say you want to build your own color palette from scratch, use:

@import "tailwindcss";

@theme {
  --*: initial; /* disable the default theme */
  --color-*: initial; /* disable specified namespace */
}

2. Positional Variants

This lets us style elements based on their position in a list. They include first:, last:, only:, odd:, and even:.

<div>
  <div class="px-4 py-1 w-full first:bg-orange-400 last:bg-cyan-400">1</div>
  <div class="px-4 py-1 w-full first:bg-orange-400 last:bg-cyan-400">2</div>
  <div class="px-4 py-1 w-full first:bg-orange-400 last:bg-cyan-400">3</div>
</div>

The result is:

We can also alternate background colors using odd: and even::

<div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">1</div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">2</div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">3</div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">4</div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">5</div>
  <div class="px-4 py-1 odd:bg-neutral-100 even:bg-neutral-200">6</div>
</div>

Variants like odd: and even: are especially handy when styling tables or horizontal, since they make it easier to follow along the rows.

3. group: Variants

The group-* variant enables us to style children based on the parent, below are some neat tricks;

Styling based on a has() pseudo-class

<div class="h-8 border border-neutral-200 flex items-center px-2 rounded-md">
  <label class="group">
    <div class="flex gap-3 items-center">
      <input type="checkbox" class="peer" />
      <span class="group-[:has(input:checked)]:font-semibold group-[:has(input:checked)]:text-blue-600">
        Accept terms and conditions
      </span>
    </div>
  </label>
</div>

Styling children based on non-standard parent states

<div class="group is-published">
  <div class="hidden group-[.is-published]:block"> Published </div>
</div>

4. :first-of-type pseudo class

This selects the first element of its kind among a group of sibling elements.

<div class="rounded-md border">
  <div class="p-2 first-of-type:bg-neutral-200">1</div>
  <div class="px-2 first-of-type:bg-neutral-200">1</div>
  <div class="p-2 first-of-type:bg-neutral-200">2</div>
  <div class="px-2 first-of-type:bg-neutral-200">2</div>
  <div class="p-2 first-of-type:bg-neutral-200">3</div>
  <div class="px-2 first-of-type:bg-neutral-200">3</div>
  <div class="p-2 first-of-type:bg-neutral-200">4</div>
  <div class="px-2 first-of-type:bg-neutral-200">4</div>
</div>

5: has-* class

has-checked:

<div class="flex items-center gap-3 border px-2 py-1 rounded-md has-checked:bg-neutral-200">
  <input type="checkbox" id="checkbox" />
  <label htmlFor="checkbox">Remember me for 30 days</label>
</div>

has-invalid:

<form class="rounded-md border-2 border-neutral-400 flex flex-col gap-3 p-2 items-start w-fit has-invalid:border-red-500 has-valid:border-green-500">
  <input type="email" required placeholder="Enter email" class="p-1" />
  <button type="submit" class="py-1 w-full bg-neutral-200 rounded-md">
    submit
  </button>
</form>

submit

6. Text utilities

<p class="first-letter:text-5xl first-line:text-red-500 indent-10 cursor-vertical-text">
  ...
</p>