================
CODE SNIPPETS
================
TITLE: Update Vue Examples to Script Setup in Tailwind UI
DESCRIPTION: Demonstrates how Tailwind UI's Vue examples now leverage Vue 3's `<script setup>` syntax. This change significantly reduces boilerplate by automatically registering components and simplifying imports, making Vue single-file components more concise. It also enables the 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: Simplified Tailwind CSS v4.0 Installation Steps
DESCRIPTION: This section outlines the streamlined setup process for Tailwind CSS v4.0, covering the npm installation, adding the PostCSS plugin, and importing Tailwind in your CSS. It emphasizes reduced boilerplate, zero configuration, and no external plugins required.

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: javascript
CODE:
```
export default {
  plugins: ["@tailwindcss/postcss"],
};
```

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

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

TITLE: Importing React Components and Utilities in Next.js
DESCRIPTION: This snippet demonstrates how to import various components and utilities, including authors, Next.js Link, and custom components like Example, Figure, Image, and Video. These imports are typical for setting up a page or component with reusable UI elements and data within a Next.js application.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2022-12-15-protocol-api-documentation-template/index.mdx#_snippet_0

LANGUAGE: jsx
CODE:
```
import { adamwathan } from "@/app/blog/authors";
import Link from "next/link";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure";
import { Image, Video } from "@/components/media";
```

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

TITLE: Configure CSS Imports in Tailwind CSS CLI
DESCRIPTION: Tailwind CSS CLI now includes built-in support for `postcss-import`, allowing developers to organize custom CSS into multiple files using `@import` without additional configuration. This simplifies project setup, especially for those using the standalone CLI. Users not relying on the CLI tool will still need to manually install and configure `postcss-import`.

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

LANGUAGE: css
CODE:
```
@import "tailwindcss/base";
@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 Headless UI v2.1
DESCRIPTION: To begin using the new features, including sibling dialog rendering, install the latest version of the Headless UI React package using npm. This command updates or installs the package to its most recent release.

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: Install Headless UI for React
DESCRIPTION: Provides the command to install the Headless UI library for React applications using npm. This is a standard package installation command for integrating the library into a project.

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

LANGUAGE: Shell
CODE:
```
npm install @headlessui/react
```

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

TITLE: Align Content to Start with Tailwind CSS place-content-start
DESCRIPTION: This example shows how to use `place-content-start` to align grid items to the beginning of both the inline and block axes. It includes both JSX for React components and plain HTML code demonstrating the utility class, ensuring content is packed against the top-left corner.

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:
```
<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: Apply justify-items-start for Grid Item Alignment in HTML
DESCRIPTION: Illustrates how to use the `justify-items-start` utility class on a grid container to align all its direct grid items to the start of their inline axis. This example provides a basic HTML structure demonstrating the effect of the utility.

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

LANGUAGE: HTML
CODE:
```
<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: Install Headless UI Combobox Component
DESCRIPTION: These commands facilitate the installation of the Headless UI library, which incorporates the new `Combobox` component. This is a minor update to version 1.5, ensuring compatibility without introducing breaking changes for existing projects.

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: Install Latest Tailwind CSS via npm
DESCRIPTION: This command installs or upgrades your project to the latest version of the `tailwindcss` package using npm. It ensures you have access to all the newest features, improvements, and bug fixes introduced in the latest release.

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

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

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

TITLE: Install Tailwind CSS v4.1
DESCRIPTION: Instructions to upgrade or install the latest version of Tailwind CSS (v4.1) using npm for different build environments, including the Tailwind CLI, Vite, and PostCSS setups.

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: Install Tailwind CSS v4.1 and CLI Tools via npm
DESCRIPTION: Provides commands to install the latest version of Tailwind CSS (v4.1) and its associated tools using npm. This includes the core Tailwind CSS package, the CLI tool, the Vite plugin, and the PostCSS plugin, catering to different project setups.

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

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: Animate Element Appearance with Tailwind CSS @starting-style Variant
DESCRIPTION: Demonstrates the new `starting` variant in Tailwind CSS, which leverages the CSS `@starting-style` feature. This allows elements to transition their properties when they are first displayed, enabling entry animations without the need for JavaScript. The example shows a popover animating its opacity on open.

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

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: Implement Scroll Snap Start with Tailwind CSS
DESCRIPTION: Demonstrates how to create a horizontally scrollable container where child elements snap to the start of the scroll area using `snap-x` and `snap-start` utilities. The example includes a visual snap point and multiple image elements.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-align.mdx#_snippet_2

LANGUAGE: jsx
CODE:
```
<div className="relative">
  <div className="mb-6 ml-6 flex items-end justify-start pt-10">
    <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
      snap point
    </div>
    <div className="absolute top-0 bottom-0 left-6 border-l border-indigo-500"></div>
  </div>
  <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
    <div className="shrink-0 snap-start scroll-mx-6">
      <div className="w-0 shrink-0"></div>
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <img
        className="h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <img
        className="h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <img
        className="h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <img
        className="h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <img
        className="h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <div className="h-40 w-3 shrink-0 sm:-ml-[2px] sm:w-96"></div>
    </div>
  </div>
</div>
```

LANGUAGE: html
CODE:
```
<!-- [!code classes:snap-x,snap-start] -->

<div class="snap-x ...">
  <div class="snap-start ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>
```

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

TITLE: Create a Message API Endpoint
DESCRIPTION: Demonstrates how to publish a new message to a specific conversation via an API endpoint. Includes examples for making the request using cURL and JavaScript, along with the expected JSON response structure. Requires 'conversation_id' and 'message' as attributes.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2022-12-15-protocol-api-documentation-template/index.mdx#_snippet_3

LANGUAGE: bash
CODE:
```
curl https://api.protocol.chat/v1/messages \
      -H "Authorization: Bearer {token}" \
      -d conversation_id="xgQQXg3hrtjh7AvZ" \
      -d message="You're what the French call 'les incompetents.'"
```

LANGUAGE: js
CODE:
```
import ApiClient from '@example/protocol-api'
const client = new ApiClient(token)
await client.messages.create({
      conversation_id: 'xgQQXg3hrtjh7AvZ',
      message: 'You\'re what the French call \'les incompetents.\'',
    })
```

LANGUAGE: json
CODE:
```
{
      "id": "gWqY86BMFRiH5o11",
      "conversation_id": "xgQQXg3hrtjh7AvZ",
      "message": "You're what the French call 'les incompetents.'",
      "reactions": [],
      "created_at": 692233200
    }
```

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

TITLE: Install Headless UI React
DESCRIPTION: Add Headless UI to your project by installing the latest version of `@headlessui/react` from npm. This command fetches the package and its dependencies, making the components available for use in your React application.

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: Apply starting styles to HTML elements with Tailwind CSS
DESCRIPTION: Demonstrates how to use the `starting` variant in Tailwind CSS to control the initial opacity of a popover element. This ensures that when the popover opens or is first rendered, it starts with a specific opacity before any transitions apply, allowing for a smooth visual effect.

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

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: HTML Example for `transition-discrete` with Display Changes
DESCRIPTION: Illustrates how to use the `transition-discrete` utility in HTML to enable smooth transitions for elements whose display property changes from `hidden` to `block`. This example shows two buttons, one using `transition-normal` and the other `transition-discrete`, to highlight the difference in transition behavior when toggling visibility.

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

LANGUAGE: HTML
CODE:
```
<!-- [!code classes:transition-discrete] -->
<label class="peer ...">
  <input type="checkbox" checked />
</label>
<button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...">
  <!-- prettier-ignore -->
  I hide
</button>

<label class="peer ...">
  <input type="checkbox" checked />
</label>
<button class="hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ...">
  I fade out
</button>
```

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

TITLE: Install @tailwindcss/line-clamp plugin
DESCRIPTION: This command installs the `@tailwindcss/line-clamp` plugin using npm, which is a prerequisite for configuring and using it in your Tailwind CSS project.

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: Migrate Tailwind CSS CLI Commands to v4
DESCRIPTION: This example shows how to update Tailwind CSS CLI commands when migrating to v4. It involves replacing the use of the `tailwindcss` package with the new dedicated `@tailwindcss/cli` package for build commands.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/upgrade-guide.mdx#_snippet_3

LANGUAGE: sh
CODE:
```
/* [!code filename:Terminal] */
  # [!code --:2]
npx tailwindcss -i input.css -o output.css
  # [!code ++:2]
npx @tailwindcss/cli -i input.css -o output.css
```

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

TITLE: Install Tailwind CSS JIT Compiler and PostCSS Dependencies
DESCRIPTION: This shell command installs the `@tailwindcss/jit` package, along with `tailwindcss`, `postcss`, and `autoprefixer`, as development dependencies. These are crucial for enabling the Just-In-Time compilation feature in your Tailwind CSS 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: Define Page Metadata and Import Components in JSX/TypeScript
DESCRIPTION: This snippet defines the page's title and description using `export const` statements and imports necessary React components like `ApiTable`, `CustomizingYourTheme`, `Example`, and `Figure` from local paths. This setup is typical for documentation pages built with frameworks like Next.js or Astro.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/perspective.mdx#_snippet_0

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

export const title = "perspective";
export const description = "Utilities for controlling an element's perspective when placed in 3D space.";
```

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

TITLE: Basic Usage of Tailwind CSS Standalone CLI Commands
DESCRIPTION: Examples demonstrating how to use the standalone Tailwind CSS CLI for common development tasks. This includes initializing a configuration file, starting a watcher for continuous compilation during development, and compiling/minifying CSS for production, mirroring the functionality of the npm-distributed CLI.

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

LANGUAGE: sh
CODE:
```
# Create a tailwind.config.js file
./tailwindcss init

# Start a watcher
./tailwindcss -i input.css -o output.css --watch

# Compile and minify your CSS for production
./tailwindcss -i input.css -o output.css --minify
```

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

TITLE: Install Tailwind CSS v4 alpha and CLI package
DESCRIPTION: Installs the latest alpha version of Tailwind CSS and its command-line interface (CLI) package using npm, preparing for CLI-based compilation.

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: Render Interactive Contrast Examples with Tailwind CSS (JSX)
DESCRIPTION: This JSX snippet demonstrates how to embed interactive examples of Tailwind CSS contrast utilities within a documentation page. It uses `Figure` and `Example` components to display multiple images with varying `contrast` classes, providing a visual representation of their effects.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-contrast.mdx#_snippet_3

LANGUAGE: JSX
CODE:
```
<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">contrast-50</p>
          <div className="relative contrast-50">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-100
          </p>
          <div className="relative contrast-100">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-125
          </p>
          <div className="relative contrast-125">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-200
          </p>
          <div className="relative contrast-200">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>


```

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

TITLE: Install Tailwind CSS v4 Alpha and Vite Plugin
DESCRIPTION: This command installs the alpha version of Tailwind CSS and its dedicated Vite plugin. It uses `npm` to fetch the `@next` tagged versions of both packages, enabling early access to v4 features within a Vite project.

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

LANGUAGE: Shell
CODE:
```
npm install tailwindcss@next @tailwindcss/vite@next
```

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

TITLE: Define MDX Case Study Metadata and Content Structure
DESCRIPTION: This MDX snippet illustrates how to structure a case study, including importing assets, defining client metadata (title, description, summary, logo, image, date, service), and a testimonial. It also demonstrates embedding custom components like `TagList`, `Blockquote`, and `StatList` directly within Markdown content for rich, interactive documentation.

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

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: Import Tailwind CSS Documentation Components (JSX)
DESCRIPTION: This snippet shows the import statements for various React components used within the Tailwind CSS documentation, such as ApiTable, Example, Figure, UsingACustomValue, and ResponsiveDesign. These components facilitate the structured presentation of utility examples and API definitions.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-contrast.mdx#_snippet_0

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

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

TITLE: Configure Webpack Loader for Blog Post Preview Extraction
DESCRIPTION: Presents a webpack configuration rule utilizing `resourceQuery` to create a custom loader. This loader processes blog post content to extract only the preview portion, defined by `<!--​more​-->` or `<!--​excerpt​-->` tags, optimizing bundle size for homepage previews.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/building-the-tailwind-blog/index.mdx#_snippet_6

LANGUAGE: javascript
CODE:
```
{
  resourceQuery: /preview/,
  use: [
    ...mdx,
    createLoader(function (src) {
      if (src.includes('<!--​more​-->')) {
        const [preview] = src.split('<!--​more​-->')
        return this.callback(null, preview)
      }

      const [preview] = src.split('<!--​/excerpt​-->')
      return this.callback(null, preview.replace('<!--​excerpt​-->', ''))
    }),
  ],
},
```

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

TITLE: Markdown Image Syntax for Dark Mode Adaptation
DESCRIPTION: This Markdown example demonstrates a custom syntax extension that allows images to adapt to light and dark modes. By including a `{scheme}` placeholder in the image URL, the underlying component can dynamically load the appropriate image variant (e.g., `light.png` or `dark.png`) based on the user's color scheme.

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

LANGUAGE: markdown
CODE:
```
## The Myth of Free Will

![Neurological Proof](/img/neuro-proof.{scheme}.png) <!-- [!code highlight:1] -->

Your brain makes decisions before you are even aware of them.
```

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

TITLE: Install Tailwind CSS v4 alpha and PostCSS plugin
DESCRIPTION: Installs the latest alpha version of Tailwind CSS and its PostCSS plugin using npm, preparing your project for PostCSS integration.

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: Import Statements for Blog Post Components and Assets
DESCRIPTION: This code block imports various modules and assets required for a blog post or page. It includes author data, local image files (JPG, PNG), and custom React components for media display, examples, and code block rendering from a component library.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2022-09-09-new-personal-website-heroicons-2-headless-ui-v17/index.mdx#_snippet_0

LANGUAGE: javascript
CODE:
```
import { adamwathan } from "@/app/blog/authors";
import card from "./card.jpg";
import spotlightPreview from "./spotlight-preview.png";
import spotlightDetail from "./spotlight-detail.png";
import heroiconsCover from "./heroicons-cover.jpg";
import headlessuiV17 from "./headlessui-v17.jpg";
import playInsiders from "./play-insiders.png";
import phoenix from "./phoenix.png";
import { Image } from "@/components/media";
import Link from "next/link";
import { Example, Figure } from "@/components/example.tsx";
import { CodeExampleGroup, CodeBlock, js, ts } from "@/components/code-example";
```

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

TITLE: Generated JSX from MDX Annotation
DESCRIPTION: Shows how an MDX annotation is transformed into a JSX component with the specified properties, demonstrating the underlying rendering mechanism and the benefit of simplified content authoring.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2022-12-15-protocol-api-documentation-template/index.mdx#_snippet_5

LANGUAGE: jsx
CODE:
```
<Heading level={2} tag="POST" label="/v1/messages">
  Create a message
</Heading>
```

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

TITLE: Example WebVTT File for Transcripts
DESCRIPTION: This WebVTT (Web Video Text Tracks) file demonstrates the standard format for captions and subtitles, including timestamps and speaker information. It's used to structure interview transcripts, allowing for custom UI rendering based on the parsed data.

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

LANGUAGE: vtt
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: Control Grid Column Start and End Lines
DESCRIPTION: Illustrates the use of `col-start-<number>` and `col-end-<number>` utilities in Tailwind CSS to position elements at specific grid lines. This example shows various combinations for starting and ending elements within a 6-column grid, providing fine-grained control over element placement.

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

LANGUAGE: html
CODE:
```
<!-- [!code classes:col-start-1,col-start-2,col-end-3,col-end-7] -->
<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: MobX React Initialization and Scheduler Setup
DESCRIPTION: This code block handles the initialization of the MobX React integration. It sets up a reaction scheduler using `Lt` (likely `mobx.configure`) and marks a global flag (`Zi`) in the window or self object, indicating that MobX React's observer batching is active. This ensures proper scheduling of updates.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/analyze/nodejs.html#_snippet_83

LANGUAGE: JavaScript
CODE:
```
!function(e){e||(e=$i),Lt({reactionScheduler:e}),("undefined"!=typeof window?window:"undefined"!=typeof self?self:Vi)[Zi]=!0}(Gi);
```

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

TITLE: Applying Hover Styles Only When Enabled with Tailwind CSS `hover:enabled`
DESCRIPTION: This example showcases the new `hover:enabled` variant, which allows hover styles to be applied only when the element is in an enabled state, providing a cleaner and more intuitive solution for disabled elements.

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

LANGUAGE: jsx
CODE:
```
<div className="flex items-center justify-center">
  <button
    type="button"
    className="inline-flex cursor-not-allowed items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white shadow transition duration-150 ease-in-out hover:enabled:bg-indigo-400 disabled:opacity-75"
    disabled
  >
    Processing...
  </button>
</div>
```

LANGUAGE: html
CODE:
```
<button type="button" class="bg-indigo-500 hover:enabled:bg-indigo-400 disabled:opacity-75 ..." disabled>
  Processing...
</button>
```

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

TITLE: Styling a Disabled Button with Tailwind CSS (Initial Approach)
DESCRIPTION: This example demonstrates a common way to style a disabled button using Tailwind CSS, highlighting how default hover styles might still apply even when the button is disabled.

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

LANGUAGE: jsx
CODE:
```
<div className="flex items-center justify-center">
  <button
    type="button"
    className="inline-flex cursor-not-allowed items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:opacity-75"
    disabled
  >
    Processing...
  </button>
</div>
```

LANGUAGE: html
CODE:
```
<button type="button" class="bg-indigo-500 hover:bg-indigo-400 disabled:opacity-75 ..." disabled>Processing...</button>
```

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

TITLE: Adjust Tailwind CSS default border and divide color in v4
DESCRIPTION: Tailwind CSS v4 changes the default `border-*` and `divide-*` color from `gray-200` to `currentColor`. This snippet provides an HTML example for explicitly setting border color and a CSS example using `@layer base` to restore the v3 default `gray-200` behavior.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/upgrade-guide.mdx#_snippet_22

LANGUAGE: html
CODE:
```
<div class="border border-gray-200 px-2 py-3 ...">
  <!-- ... -->
</div>
```

LANGUAGE: css
CODE:
```
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}
```

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

TITLE: Migrate Tailwind CSS v3 Shadow, Radius, and Blur Classes to v4
DESCRIPTION: Tailwind CSS v4 renames shadow, radius, and blur utility scales for improved consistency. For example, `shadow-sm` is now `shadow-xs` and `shadow` is now `shadow-sm`, with similar changes for `drop-shadow`, `blur`, `backdrop-blur`, and `rounded` utilities. This snippet provides examples of the updated v4 class names.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/upgrade-guide.mdx#_snippet_16

LANGUAGE: html
CODE:
```
<input class="shadow-xs" />
```

LANGUAGE: html
CODE:
```
<input class="shadow-sm" />
```

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

TITLE: Apply Arbitrary Variants for CSS @supports Queries
DESCRIPTION: This example demonstrates how to use arbitrary variants to apply styles conditionally based on CSS `@supports` queries. It applies `bg-white/50` and `backdrop-blur` classes only if the browser supports `backdrop-filter:blur(0)`, enabling feature-dependent styling.

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

LANGUAGE: html
CODE:
```
<div
  class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/50 [@supports(backdrop-filter:blur(0))]:backdrop-blur"
>
  <!-- ... -->
</div>
```

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

TITLE: Building a Responsive Component with Tailwind Utility Classes
DESCRIPTION: This example demonstrates how to construct a fully responsive UI component, including hover and active styles, entirely using Tailwind CSS utility classes. It showcases the power of utility-first approach for complex layouts and interactive elements.

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

LANGUAGE: JSX
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:
```
<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>
    <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: Import React Components for Documentation
DESCRIPTION: Imports various React components (`ApiTable`, `Example`, `Figure`, `ResponsiveDesign`) used for structuring and displaying documentation content within a React or Next.js application.

SOURCE: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transform-style.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 } from "@/components/content.tsx";
```