========================

CODE SNIPPETS
========================
TITLE: Install dependencies for Tailwind CSS documentation
DESCRIPTION: This command installs all necessary project dependencies using pnpm, a
fast, disk-space efficient package manager. It should be run once after cloning the
repository to set up the development environment.

SOURCE:
https://github.com/tailwindlabs/tailwindcss.com/blob/main/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
pnpm install
```

----------------------------------------

TITLE: Displaying Catalyst installation process image

DESCRIPTION: This JSX snippet renders an `Image` component, illustrating the
installation process for Catalyst. The `src` prop points to the
`catalystInstallation` asset, providing a visual guide for users setting up the UI
kit in their projects.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
introducing-catalyst/index.mdx#_snippet_3

LANGUAGE: JSX
CODE:
```
<Image alt="" src={catalystInstallation} />
```

----------------------------------------

TITLE: HTML Example: Align Grid Items to Start (justify-items-start)

DESCRIPTION: Illustrates the practical application of the `justify-items-start`
utility class within an HTML grid layout. This example demonstrates how to align
grid items to the beginning of their inline axis, showcasing a simple grid
container with multiple child `div` elements that are horizontally aligned to the
start.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/justify-
items.mdx#_snippet_1

LANGUAGE: html
CODE:
```
<!-- [!code classes:justify-items-start] -->
<div class="grid justify-items-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
```
----------------------------------------

TITLE: Run Tailwind CSS documentation development server

DESCRIPTION: This command starts the local development server for the Tailwind CSS
documentation. It leverages Next.js to provide a hot-reloading environment,
allowing developers to see changes in real-time as they modify the source code.

SOURCE:
https://github.com/tailwindlabs/tailwindcss.com/blob/main/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
pnpm run dev
```

----------------------------------------

TITLE: Install Tailwind CSS v4 Alpha and CLI Package

DESCRIPTION: Installs the `tailwindcss@next` and `@tailwindcss/cli@next` packages
using npm, providing the necessary tools to use Tailwind CSS directly via its
command-line interface without a PostCSS setup.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4-alpha/index.mdx#_snippet_16

LANGUAGE: sh
CODE:
```
npm install tailwindcss@next @tailwindcss/cli@next
```

----------------------------------------

TITLE: Vue Component Example with Script Setup Syntax

DESCRIPTION: This code snippet demonstrates the use of Vue 3's `<script setup>`
syntax within a Single-File Component (SFC). It showcases how to import reactive
references and components from libraries like Headless UI and Heroicons,
significantly reducing boilerplate by automatically making imported components
available in the template without explicit registration. This approach also paves
the way for potential future use of namespaced components.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2022-05-
23-headless-ui-v1-6-tailwind-ui-team-management/index.mdx#_snippet_5

LANGUAGE: HTML
CODE:
```
<template>
<Listbox as="div" v-model="selected">
<!-- ... -->
</Listbox>
</template>

<script setup>
import { ref } from "vue";
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions }
from "@headlessui/vue";
 import { CheckIcon, SelectorIcon } from "@heroicons/vue/solid";

const people = [
{ id: 1, name: "Wade Cooper" },
// ...
];

const selected = ref(people[3]);

</script>
```

----------------------------------------

TITLE: Install Headless UI v2.0 for React

DESCRIPTION: Add Headless UI v2.0 to your project by installing the latest version
of `@headlessui/react` from npm. This command ensures you get all the new features
and improvements.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
headless-ui-v2/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @headlessui/react@latest
```

----------------------------------------

TITLE: Install or Upgrade Tailwind CSS via npm

DESCRIPTION: This command allows users to install the latest version of the
Tailwind CSS framework as a development dependency in their project. It's the
standard way to get started or update an existing Tailwind CSS installation.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v3-2/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install -D tailwindcss@latest
```

----------------------------------------

TITLE: Implementing Popover Entry Animation with Tailwind CSS @starting-style

DESCRIPTION: This example demonstrates a popover component that utilizes the
`@starting-style` variant to achieve a smooth fade-in effect when it first appears.
The `starting:open:opacity-0` class ensures the popover starts with zero opacity
before transitioning to full visibility, preventing a jarring initial render. The
first code block shows a full HTML structure with Tailwind classes, while the
second provides a simplified HTML representation highlighting the key Tailwind
classes.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/hover-
focus-and-other-states.mdx#_snippet_60

LANGUAGE: HTML
CODE:
```
<div className="grid h-full items-center justify-center">
<button
popoverTarget="my-popover"
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2
text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-
visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
sm:col-start-2"
>
Check for updates
</button>
<div
popover="auto"
id="my-popover"
className="relative inset-y-0 mx-auto my-auto transform overflow-hidden
rounded-lg bg-white px-4 pt-5 pb-4 text-left opacity-0 shadow-xl transition-all
[transition-behavior:allow-discrete] duration-500 sm:w-full sm:max-w-96 sm:p-6
dark:bg-gray-800 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:
[&:is([open],:popover-open)]:opacity-0"
>
<div>
<div className="mx-auto flex size-12 items-center justify-center rounded-full
bg-indigo-50 dark:bg-indigo-600/10">
<svg
className="size-5 text-indigo-400 dark:text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2
0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0
10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0
0 0 9.253 9H9Z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-base font-semibold text-gray-900 dark:text-white"
id="modal-title">
Update available
</h3>
<div className="mt-2">
<p className="text-sm text-gray-500 dark:text-gray-200">
A new software update is available: <span className="font-
semibold">v2.0.4.</span>
<br />
Click the button below to install it.
</p>
</div>
</div>
</div>
<div className="mt-5">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3
py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-
visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-
visible:outline-indigo-600 sm:col-start-2"
>
Install
</button>
</div>
</div>
</div>
```

LANGUAGE: HTML
CODE:
```
<!-- [!code classes:starting:open:opacity-0] -->
<div>
<button popovertarget="my-popover">Check for updates</button>
<div popover id="my-popover" class="opacity-0 starting:open:opacity-0 ...">
<!-- ... -->
</div>
</div>
```

----------------------------------------

TITLE: Apply place-self-start in React/JSX and HTML

DESCRIPTION: Illustrates the usage of the `place-self-start` utility class within a
React/JSX component and its corresponding HTML structure to align an item to the
start on both axes. The example shows a grid layout with one item explicitly
aligned to the start.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/place-
self.mdx#_snippet_2

LANGUAGE: jsx
CODE:
```
<div className="grid grid-cols-3 place-items-stretch gap-4 font-mono text-sm
leading-6 font-bold text-white">
<div className="flex items-center justify-center rounded-lg bg-purple-300 p-8
dark:bg-purple-800 dark:text-purple-400">
01
</div>
<div className="grid grid-cols-1">
<Stripes border className="col-start-1 row-start-1 rounded-lg" />
<div className="col-start-1 row-start-1 flex size-14 items-center justify-
center place-self-start rounded-lg bg-purple-500">
02
</div>
</div>
<div className="flex items-center justify-center rounded-lg bg-purple-300 p-8
dark:bg-purple-800 dark:text-purple-400">
03
</div>
<div className="flex items-center justify-center rounded-lg bg-purple-300 p-8
dark:bg-purple-800 dark:text-purple-400">
04
</div>
<div className="flex items-center justify-center rounded-lg bg-purple-300 p-8
dark:bg-purple-800 dark:text-purple-400">
05
</div>
<div className="flex items-center justify-center rounded-lg bg-purple-300 p-8
dark:bg-purple-800 dark:text-purple-400">
06
</div>
</div>
```

LANGUAGE: html
CODE:
```
<div class="grid grid-cols-3 gap-4 ...">
<div>01</div>
<div class="place-self-start ...">02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
```

----------------------------------------

TITLE: HTML Example: Positioning Grid Items with Start/End Lines

DESCRIPTION: Illustrates the use of `col-start-<number>` and `col-end-<number>`
utilities in HTML to position grid items by specifying their starting and ending
grid lines. This example combines these utilities with `col-span` for precise
placement.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-
column.mdx#_snippet_2

LANGUAGE: HTML
CODE:
```
<div class="grid grid-cols-6 gap-4">
<div class="col-span-4 col-start-2 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-span-2 col-end-7 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
```

----------------------------------------

TITLE: Install Tailwind CSS v3.0 via npm

DESCRIPTION: Provides the command to install the latest version of Tailwind CSS,
PostCSS, and Autoprefixer as development dependencies using npm, enabling users to
start playing with the new features.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v3/index.mdx#_snippet_1

LANGUAGE: shell
CODE:
```
npm install -D tailwindcss@latest postcss autoprefixer
```

----------------------------------------

TITLE: Align content to start using Tailwind CSS place-content-start

DESCRIPTION: Illustrates the use of the `place-content-start` utility class to pack
grid items against the start of the block axis. This class sets both `align-
content` and `justify-content` to `start`, positioning content at the beginning of
the container.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/place-
content.mdx#_snippet_2

LANGUAGE: JSX
CODE:
```
<div className="grid grid-cols-1">
<Stripes border className="col-start-1 row-start-1 rounded-lg" />
<div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)]
place-content-start gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-
white">
<div className="flex h-14 w-14 items-center justify-center rounded-lg bg-
fuchsia-500 p-4">01</div>
<div className="flex h-14 w-14 items-center justify-center rounded-lg bg-
fuchsia-500 p-4">02</div>
<div className="flex h-14 w-14 items-center justify-center rounded-lg bg-
fuchsia-500 p-4">03</div>
<div className="flex h-14 w-14 items-center justify-center rounded-lg bg-
fuchsia-500 p-4">04</div>
</div>
</div>
```

LANGUAGE: HTML
CODE:
```
<!-- [!code classes:place-content-start] -->
<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
```

----------------------------------------

TITLE: Component Imports

DESCRIPTION: Imports necessary React components and utilities for building the
documentation page, including `ApiTable` for displaying API specifications and
`Example` for code examples.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/top-
right-bottom-left.mdx#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { CustomizingYourSpacingScale } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";
```

----------------------------------------

TITLE: Simplified Tailwind CSS v4.0 Installation

DESCRIPTION: This section illustrates the streamlined installation process for
Tailwind CSS v4.0, significantly reducing the number of steps and boilerplate. It
covers installing the necessary packages, configuring the PostCSS plugin, and
importing Tailwind directly into your CSS, emphasizing a zero-configuration
approach.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4/index.mdx#_snippet_3

LANGUAGE: shell
CODE:
```
npm i tailwindcss @tailwindcss/postcss;
```

LANGUAGE: js
CODE:
```
export default {
plugins: ["@tailwindcss/postcss"]
};
```

LANGUAGE: css
CODE:
```
@import "tailwindcss";
```

----------------------------------------

TITLE: Animate Element Appearance with Tailwind CSS starting Variant and @starting-
style
DESCRIPTION: Learn how to use the new `starting` variant in Tailwind CSS to
leverage the CSS `@starting-style` feature. This allows for smooth transitions when
an element is first displayed, eliminating the need for JavaScript-based animations
for initial rendering. The example demonstrates a popover animation.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4/index.mdx#_snippet_20

LANGUAGE: HTML
CODE:
```
<div className="grid h-full items-center justify-center">
<button
popoverTarget="my-popover"
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2
text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-
visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
sm:col-start-2"
>
Check for updates
</button>
<div
popover="auto"
id="my-popover"
className="relative inset-y-0 mx-auto my-auto transform overflow-hidden
rounded-lg bg-white px-4 pt-5 pb-4 text-left opacity-0 shadow-xl ring ring-black/5
transition-all transition-discrete duration-500 sm:w-full sm:max-w-96 sm:p-6
dark:bg-gray-800 dark:inset-ring dark:inset-ring-white/5 [&:is([open],:popover-
open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0"
>
<div>
<div className="mx-auto flex size-12 items-center justify-center rounded-full
bg-indigo-50 dark:bg-indigo-600/10">
<svg
className="size-5 text-indigo-400 dark:text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2
0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0
10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0
0 0 9.253 9H9Z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="mt-3 text-center sm:mt-5">
<div className="text-base font-semibold text-gray-900 dark:text-white"
id="modal-title">
Update available
</div>
<div className="mt-2">
<p className="text-sm text-gray-500 dark:text-gray-200">
A new software update is available: <span className="font-
semibold">v2.0.4.</span>
<br />
Click the button below to install it.
</p>
</div>
</div>
</div>
<div className="mt-5">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3
py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-
visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-
visible:outline-indigo-600 sm:col-start-2"
>
Install
</button>
 </div>
</div>
</div>
```

LANGUAGE: HTML
CODE:
```
<!-- [!code classes:starting:open:opacity-0,transition-discrete] -->
<div>
<button popovertarget="my-popover">Check for updates</button>
<div popover id="my-popover" class="transition-discrete starting:open:opacity-
0 ...">
<!-- ... -->
</div>
</div>
```

----------------------------------------

TITLE: Install Headless UI v2.1 via npm

DESCRIPTION: This command installs the latest version of the Headless UI React
library using npm. It is required to access the new features, including the ability
to render multiple dialogs as siblings.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2024-06-
21-headless-ui-v2-1/index.mdx#_snippet_3

LANGUAGE: sh
CODE:
```
npm i @headlessui/react@latest
```

----------------------------------------

TITLE: MDX Case Study File Structure Example

DESCRIPTION: An example of an MDX file used for defining a case study. It
demonstrates importing assets, exporting metadata objects (`caseStudy`,
`metadata`), and embedding custom React components (`TagList`, `Blockquote`,
`StatList`) alongside standard Markdown content. This structure allows for rich,
data-driven content generation.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2023-08-
07-meet-studio-our-new-agency-template/index.mdx#_snippet_3

LANGUAGE: mdx
CODE:
```
import logo from "@/images/clients/phobia/logomark-dark.svg";
import imageHero from "./hero.jpg";
import imageJennyWilson from "./jenny-wilson.jpeg";

export const caseStudy = {

client: "Phobia",
title: "Overcome your fears, find your match",
description:
"Find love in the face of fear — Phobia is a dating app that matches users
based on their mutual phobias so they can be scared together.",
 summary: [
"Find love in the face of fear — Phobia is a dating app that matches users
based on their mutual phobias so they can be scared together.",
"We worked with Phobia to develop a new onboarding flow. A user is shown
pictures of common phobias and we use the microphone to detect which ones make them
scream, feeding the results into the matching algorithm.",
],
logo,
image: { src: imageHero },
date: "2022-06",
service: "App development",
testimonial: {
author: { name: "Jenny Wilson", role: "CPO of Phobia" },
content:
"The team at Studio went above and beyond with our onboarding, even finding a
way to access the user’s microphone without triggering one of those annoying
permission dialogs.",
},
};

export const metadata = {

title: `${caseStudy.client} Case Study`,
description: caseStudy.description,
};

## Overview

Noticing incredibly high churn, the team at Phobia came to the conclusion that,
instead of having a
fundamentally flawed business idea, they needed to improve their onboarding
process.

Previously users selected their phobias manually but this led to some users
selecting things they
weren’t actually afraid of to increase their matches.

To combat this, we developed a system that displays a slideshow of common phobias

during
onboarding. We then use malware to surreptitiously access their microphone and
detect when they
have audible reactions. We measure the pitch, volume and duration of their screams
and feed that
information to the matching algorithm.

The next phase is a VR version of the onboarding flow where users are subjected to
a series of
scenarios that will determine their fears. We are currently developing the first
scenario, working
title: “Jumping out of a plane full of spiders”.

## What we did

<TagList>
<TagListItem>Android</TagListItem>
<TagListItem>iOS</TagListItem>
<TagListItem>Malware</TagListItem>
<TagListItem>VR</TagListItem>
</TagList>
<Blockquote author={{ name: "Jenny Wilson", role: "CPO of Phobia" }} image={{ src:
imageJennyWilson }}>
The team at Studio went above and beyond with our onboarding, even finding a way
to access the user’s microphone
without triggering one of those annoying permission dialogs.
</Blockquote>

<StatList>
<StatListItem value="20%" label="Churn rate" />
<StatListItem value="5x" label="Uninstalls" />
<StatListItem value="2.3" label="App store rating" />
<StatListItem value="8" label="Pending lawsuits" />
</StatList>
```

----------------------------------------

TITLE: Tailwind CSS Responsive Component Example

DESCRIPTION: This example demonstrates a fully responsive component built entirely
with Tailwind CSS utility classes, showcasing how to apply styles for different
screen sizes, hover, and active states. It highlights the power of utility classes
for building complex UIs with design constraints.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/styling-
with-utility-classes.mdx#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<div className="mx-auto max-w-sm space-y-2 rounded-xl bg-white px-8 py-8 shadow-lg
ring ring-black/5 @sm:flex @sm:items-center @sm:space-y-0 @sm:gap-x-6 @sm:py-4">
<img
className="mx-auto block h-24 rounded-full @sm:mx-0 @sm:shrink-0"
src={erinLindford.src}
alt="Woman's Face"
/>
<div className="space-y-2 text-center @sm:text-left">
<div className="space-y-0.5">
<p className="text-lg font-semibold text-black">Erin Lindford</p>
<p className="font-medium text-gray-500">Product Engineer</p>
</div>
<button className="rounded-full border border-purple-200 px-4 py-1 text-sm
font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600
hover:text-white active:bg-purple-700">
Message
</button>
</div>
</div>
```

LANGUAGE: HTML
CODE:
```
<!-- [!code classes:sm:flex-row,sm:py-4,sm:gap-6,sm:mx-0,sm:shrink-0,sm:text-
left,sm:items-center] -->
<!-- [!code classes:hover:text-white,hover:bg-purple-600,hover:border-
transparent,active:bg-purple-700] -->
<div class="flex flex-col gap-2 p-8 sm:flex-row sm:items-center sm:gap-6 sm:py-
4 ...">
 <img class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-
lindford.jpg" alt="" />
<div class="space-y-2 text-center sm:text-left">
<div class="space-y-0.5">
<p class="text-lg font-semibold text-black">Erin Lindford</p>
<p class="font-medium text-gray-500">Product Engineer</p>
</div>
<!-- prettier-ignore -->
<button class="border-purple-200 text-purple-600 hover:border-transparent
hover:bg-purple-600 hover:text-white active:bg-purple-700 ...">
Message
</button>
</div>
</div>
```

----------------------------------------

TITLE: Headless UI Combobox Virtualization Example

DESCRIPTION: Illustrates how to implement list virtualization for the Headless UI
Combobox component using the new `virtual` prop. This example demonstrates handling
a large dataset of items (up to 1000 people) and rendering them efficiently with
`ComboboxOptions` by integrating with TanStack Virtual, improving performance for
extensive lists.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
headless-ui-v2/index.mdx#_snippet_7

LANGUAGE: jsx
CODE:
```
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions }
from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { useState } from "react";

const people = [
{ id: 1, name: "Rossie Abernathy" },
{ id: 2, name: "Juana Abshire" },
{ id: 3, name: "Leonel Abshire" },
{ id: 4, name: "Llewellyn Abshire" },
{ id: 5, name: "Ramon Abshire" },
// ...up to 1000 people
];

function Example() {
const [query, setQuery] = useState("");
const [selected, setSelected] = useState(people[0]);

const filteredPeople =
query === ""
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase());
});

return (
<Combobox
value={selected}
 virtual={{ options: filteredPeople }}
onChange={(value) => setSelected(value)}
onClose={() => setQuery("")}
>
<div>
<ComboboxInput displayValue={(person) => person?.name} onChange={(event) =>
setQuery(event.target.value)} />
<ComboboxButton>
<ChevronDownIcon />
</ComboboxButton>
</div>
<ComboboxOptions>
{({ option: person }) => (
<ComboboxOption key={person.id} value={person}>
{person.name}
</ComboboxOption>
)}
</ComboboxOptions>
</Combobox>
);
}
```

----------------------------------------

TITLE: Install Headless UI Combobox Component

DESCRIPTION: These commands install the Headless UI library, which includes the new
Combobox component. Separate commands are provided for React and Vue projects,
allowing developers to integrate the component into their respective frameworks.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
headless-ui-v1-5/index.mdx#_snippet_1

LANGUAGE: sh
CODE:
```
# For React
npm install @headlessui/react

# For Vue
npm install @headlessui/vue
```

----------------------------------------

TITLE: Align content to start with Tailwind CSS

DESCRIPTION: Demonstrates how to use the `content-start` utility class in Tailwind
CSS to pack rows against the start of the cross axis in a grid container. This
example shows both the React JSX component structure and the resulting HTML markup
for a visual representation.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/align-
content.mdx#_snippet_1

LANGUAGE: javascript
CODE:
```
<div className="grid h-56 grid-cols-1">
<Stripes border className="col-start-1 row-start-1 rounded-lg" />
 <div className="col-start-1 row-start-1 grid grid-cols-3 content-start gap-4
rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
<div className="rounded-lg bg-purple-500 p-4">01</div>
<div className="rounded-lg bg-purple-500 p-4">02</div>
<div className="rounded-lg bg-purple-500 p-4">03</div>
<div className="rounded-lg bg-purple-500 p-4">04</div>
<div className="rounded-lg bg-purple-500 p-4">05</div>
</div>
</div>
```

LANGUAGE: html
CODE:
```
<div class="grid h-56 grid-cols-3 content-start gap-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>
```

----------------------------------------

TITLE: Tailwind CSS User List Component Example (JSX)

DESCRIPTION: Demonstrates a partial React/JSX component structure for displaying a
list of users, applying various Tailwind CSS utility classes like `flex`, `h-10`,
`w-10`, `rounded-full`, `ml-3`, `overflow-hidden`, `text-sm`, `font-medium`, `text-
slate-900`, and `truncate` for styling user profiles.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v3-1/index.mdx#_snippet_27

LANGUAGE: html
CODE:
```
<p className="truncate text-sm text-slate-
500">kristen.ramos@example.com</p>
</div>
</li>
<li className="flex">
<img
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1463453091185-61582044d556?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
"
alt=""
/>
<div className="ml-3 overflow-hidden">
<p className="text-sm font-medium text-slate-900">Floyd Miles</p>
<p className="truncate text-sm text-slate-
500">floyd.miles@example.com</p>
</div>
</li>
<li className="flex">
<img
className="h-10 w-10 rounded-full"
 src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
"
alt=""
/>
<div className="ml-3 overflow-hidden">
<p className="text-sm font-medium text-slate-900">Courtney Henry</p>
<p className="truncate text-sm text-slate-
500">courtney.henry@example.com</p>
</div>
</li>
</ul>
</div>
}
```

----------------------------------------

TITLE: Install Tailwind CSS via npm

DESCRIPTION: This command installs or upgrades Tailwind CSS to the latest version
using npm, allowing users to get started with the new features introduced in v2.2.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-2-2/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install -D tailwindcss@latest
```

----------------------------------------

TITLE: Install Tailwind CSS JIT and PostCSS Dependencies

DESCRIPTION: This command installs the necessary packages for using the
experimental Just-in-Time compiler for Tailwind CSS, along with PostCSS and
Autoprefixer, as development dependencies. These are required to set up the JIT
engine in your project.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/just-in-
time-the-next-generation-of-tailwind-css/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer
```

----------------------------------------

TITLE: Install Tailwind CSS v4 Alpha and PostCSS Plugin

DESCRIPTION: Installs the `tailwindcss@next` and `@tailwindcss/postcss@next`
packages using npm, which are essential for integrating Tailwind CSS v4 alpha with
a PostCSS build pipeline.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4-alpha/index.mdx#_snippet_13
LANGUAGE: sh
CODE:
```
npm install tailwindcss@next @tailwindcss/postcss@next
```

----------------------------------------

TITLE: Configure CSS Imports with Tailwind CLI

DESCRIPTION: Tailwind CSS CLI now includes `postcss-import` by default, simplifying
the organization of custom CSS into multiple files without additional
configuration. This example shows `main.css` importing `select2-theme.css` and the
content of `select2-theme.css` with Tailwind directives.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v3-1/index.mdx#_snippet_2

LANGUAGE: css
CODE:
```
@import "tailwindcss/base";
/* [!code highlight:2] */
@import "./select2-theme.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

LANGUAGE: css
CODE:
```
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply rounded border border-gray-300;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
```

----------------------------------------

TITLE: Install or Upgrade Tailwind CSS to v4.1

DESCRIPTION: These commands demonstrate how to install or upgrade Tailwind CSS to
the latest v4.1 release using different package managers and build tool
integrations. Choose the command relevant to your project setup (CLI, Vite, or
PostCSS).

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4-1/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/cli@latest
```
LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/vite@latest
```

LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/postcss@latest
```

----------------------------------------

TITLE: Example WebVTT Transcript File

DESCRIPTION: This WebVTT (Web Video Text Tracks) file demonstrates the standard
format for video captions and transcripts. It includes timestamps, speaker
identification using `<v SpeakerName>` tags, and the corresponding dialogue,
enabling structured parsing for custom UI rendering.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2025-05-
14-compass-course-starter-kit/index.mdx#_snippet_1

LANGUAGE: txt
CODE:
```
WEBVTT

00:00.000 --> 00:20.000

<v Tom Harris>Hello fellow passengers, welcome to the Compass podcast. Today, we
have a special guest, Annie King. She's the author of The Inevitable You: How to
Embrace Your Path and Succeed with Relentless Precision. Annie, welcome to the
show.

00:20.000 --> 00:35.000

<v Annie King>Thank you! I'm so happy to be here. And thanks for sending me the
questions in advance — I'm really excited to share some of the ideas from the book
with your viewers. I think we're going to have a lot of fun unpacking what it means
to truly embrace your path.

00:35.000 --> 00:45.000

<v Tom Harris>Absolutely! I want to get into your book, but first I have to ask —
what was it like growing up in a household that treated organization almost
like...a sport?
```

----------------------------------------

TITLE: Traditional UI Library Component API Example

DESCRIPTION: Illustrates a common UI library API pattern where all properties
reside on a single component, making it challenging to style individual elements
within it. This example shows a `TextField` component with `name`, `label`, and
`description` props.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
introducing-catalyst/index.mdx#_snippet_4

LANGUAGE: JSX
CODE:
```
function Example() {
return (
<TextField
name="product_name"
label="Product name"
description="Use the name you'd like people to see in their cart."
/>
);
}
```

----------------------------------------

TITLE: HTML Example: Positioning Grid Items with Row Start/End

DESCRIPTION: Illustrates the use of `row-start-<number>` and `row-end-<number>`
utilities in HTML to precisely position grid items by specifying their starting and
ending grid lines. This allows for fine-grained control over element placement
within the grid.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-
row.mdx#_snippet_2

LANGUAGE: html
CODE:
```
<div class="grid grid-flow-col grid-rows-3 gap-4">
<div class="row-span-2 row-start-2 ...">01</div>
<div class="row-span-2 row-end-3 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
```

----------------------------------------

TITLE: Static HTML/JSX Example of Contributor List

DESCRIPTION: This HTML/JSX snippet provides a static visual example of a
contributor list, showcasing multiple avatar images and a total count. It
represents the kind of UI element that would typically be generated dynamically in
a real application using a loop.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/styling-
with-utility-classes.mdx#_snippet_26

LANGUAGE: html
CODE:
```
<div className="bg-white">
<div className="mx-auto w-72 px-8 py-6 sm:w-96 sm:px-12 sm:py-8">
<div className="flex items-center space-x-2 text-base">
<h4 className="text-base font-semibold text-slate-900">Contributors</h4>
<span className="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold
text-slate-700">204</span>
</div>
<div className="mt-3 flex -space-x-2 overflow-hidden">
<img
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
"
alt=""
/>
<img
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-
1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<img
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q
=80"
alt=""
/>
<img
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
"
alt=""
/>
<img
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
"
alt=""
/>
</div>
<div className="mt-3 text-sm font-medium">
<a href="#" className="text-blue-500">
+ 198 others
</a>
</div>
</div>
</div>
```

----------------------------------------

TITLE: Install Tailwind CSS Line Clamp Plugin

DESCRIPTION: This shell command installs the `@tailwindcss/line-clamp` plugin using
npm. It's the first step to integrate the plugin into a project, making its utility
classes available for use.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/multi-
line-truncation-with-tailwindcss-line-clamp/index.mdx#_snippet_0

LANGUAGE: sh
CODE:
```
npm install @tailwindcss/line-clamp
```
----------------------------------------

TITLE: Install or Update Tailwind CSS to Latest Version via npm

DESCRIPTION: These shell commands facilitate the installation or update of Tailwind
CSS to its latest version using npm. Separate commands are provided for integration
with the Tailwind CLI, Vite, and PostCSS, ensuring the correct core package and
respective plugin are installed for each development setup.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/
tailwindcss-v4-1/index.mdx#_snippet_26

LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/cli@latest
```

LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/vite@latest
```

LANGUAGE: sh
CODE:
```
npm install tailwindcss@latest @tailwindcss/postcss@latest
```

----------------------------------------

TITLE: Headless UI Menu with Simplified Transition API

DESCRIPTION: Demonstrates how to apply transitions to a Headless UI `Menu`
component using the new `transition` prop and data attributes like `data-[closed]`,
`data-[enter]`, and `data-[leave]` for styling different transition stages. This
example shows a basic menu with a button and menu items.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2024-06-
21-headless-ui-v2-1/index.mdx#_snippet_0

LANGUAGE: jsx
CODE:
```
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";

function Example() {
return (
<Menu>
<MenuButton>My account</MenuButton>
<MenuItems
transition
className={`
transition ease-out
data-[closed]:scale-95 data-[closed]:opacity-0
data-[enter]:duration-200 data-[leave]:duration-300
`}
>
{/* Menu items… */}
 </MenuItems>
</Menu>
);
}
```