### Initialize and Install Project Dependencies (Bash)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This snippet covers initializing a new project directory and installing essential dependencies for USWDS and Tailwind CSS, including Tailwind itself and various icon and font packages. It's a foundational step for setting up the project environment.

```bash
mkdir my-project && cd my-project
npm init -y
npm i @uswds-tailwind/compat @uswds-tailwind/theme
npm i tailwindcss @tailwindcss/vite @iconify-json/fa-solid @iconify-json/fa6-brands @iconify-json/material-symbols
npm i @fontsource-variable/open-sans @fontsource-variable/public-sans @fontsource-variable/roboto-mono @fontsource-variable/source-sans-3 @fontsource-variable/merriweather
```

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

### Create Project Structure (Bash)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This command creates the necessary directories and files for a standard project structure, including source, assets, JavaScript, and CSS folders, along with an index.html file and a .gitignore file. This sets up the basic organization for your project.

```bash
mkdir {src,src/assets,src/assets/js,src/assets/css}
touch src/index.html src/assets/js/main.js src/assets/css/styles.css .gitignore
```

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

### Tailwind CSS Grid Column Offset Example

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/grid.mdx

Illustrates how to create column offsets in a Tailwind CSS grid layout using 'col-start' and 'col-span' utilities. This example positions a column starting from the 5th column and spanning 8 columns.

```html
<div class="space-y-4">

    <!-- Used to illustrate the 12 column layout -->
    <div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
      <div class="flex justify-center leading-none">1</div>
      <div class="flex justify-center leading-none">2</div>
      <div class="flex justify-center leading-none">3</div>
      <div class="flex justify-center leading-none">4</div>
      <div class="flex justify-center leading-none">5</div>
      <div class="flex justify-center leading-none">6</div>
      <div class="flex justify-center leading-none">7</div>
      <div class="flex justify-center leading-none">8</div>
      <div class="flex justify-center leading-none">9</div>
      <div class="flex justify-center leading-none">10</div>
      <div class="flex justify-center leading-none">11</div>
      <div class="flex justify-center leading-none">12</div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-12">
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black col-start-5 col-span-8">
        .col-start-5.col-span-8
      </div>
    </div>
  </div>
```

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

### Install USWDS Tailwind Packages and Fonts

Source: https://context7.com/ihiutch/uswds-tailwind/llms.txt

Installs the core theme and compatibility packages for USWDS Tailwind, along with required Google Fonts. This is the initial setup step for using the library.

```bash
# Install packages
npm install @uswds-tailwind/theme @uswds-tailwind/compat

# Install required fonts
npm install @fontsource-variable/open-sans @fontsource-variable/public-sans \
  @fontsource-variable/roboto-mono @fontsource-variable/source-sans-3 \
  @fontsource-variable/merriweather
```

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

### Run Astro Development Server (Bash)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/README.md

Command to start the Astro development server for the USWDS Tailwind project. This allows for local development and previewing of the documentation site. Assumes project dependencies are already installed.

```bash
pnpm dev
```

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

### Tailwind CSS Grid Gutters Example

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/grid.mdx

Demonstrates how to use Tailwind CSS utility classes to define gutters and column spans within a 12-column grid system. This example shows varying gap sizes between columns.

```html
<div class="space-y-4">

    <!-- Used to illustrate the 12 column layout -->
    <div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
      <div class="flex justify-center leading-none">1</div>
      <div class="flex justify-center leading-none">2</div>
      <div class="flex justify-center leading-none">3</div>
      <div class="flex justify-center leading-none">4</div>
      <div class="flex justify-center leading-none">5</div>
      <div class="flex justify-center leading-none">6</div>
      <div class="flex justify-center leading-none">7</div>
      <div class="flex justify-center leading-none">8</div>
      <div class="flex justify-center leading-none">9</div>
      <div class="flex justify-center leading-none">10</div>
      <div class="flex justify-center leading-none">11</div>
      <div class="flex justify-center leading-none">12</div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-4 bg-blue-warm-10">
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-8 bg-blue-warm-10">
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-white p-4 border border-black">
        (col-span-1)
      </div>
    </div>

  </div>
```

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

### Clone Repository and Install Dependencies (Bash)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/README.md

This snippet shows how to clone the USWDS Tailwind repository and install its dependencies using PNPM. It is essential for setting up the development environment. Ensure Node.js (v18+) and PNPM are installed beforehand.

```bash
git clone https://github.com/IHIutch/uswds-tailwind.git
cd uswds-tailwind
pnpm install
pnpm build
```

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

### Icon List Simple Content Example

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/icon-list.mdx

This example demonstrates an icon list for presenting simple content, like program benefits. It utilizes thumb-up icons and Tailwind CSS for a clean, list-based layout.

```html
<p class="mb-4">Benefits of joining Global Entry program:</p>
<ul class="list-none space-y-3 max-w-lg">
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>No processing lines</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Access to expedited entry benefits in other countries</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Available at major U.S. airports</p>
    </div>
  </li>
  <li class="flex gap-1.5">
    <div class="icon-[material-symbols--thumb-up] size-6 shrink-0 text-blue-60v"></div>
    <div>
      <p>Reduced wait times</p>
    </div>
  </li>
</ul>
```

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

### Sticky Column Table Example (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/table.mdx

Illustrates how to create a table with sticky columns using USWDS and Tailwind CSS. This example focuses on making the first column ('Document title') sticky on the left, improving navigation in wide tables. It includes styling for borders and active sort states.

```html
<div class="overflow-y-hidden w-full" tabindex="0">
    <table class="border-separate border-spacing-0">
      <caption class="mb-3 text-left font-bold">Bordered table</caption>
      <thead>
        <tr class="*:bg-gray-10 *:text-left *:border *:not-first:border-l-0 *:border-black *:px-4 *:py-2">
          <th scope="col" class="sticky left-0">Document title</th>
          <th scope="col">Description</th>
          <th scope="col">Year</th>
        </tr>
      </thead>
      <tbody>
        <tr class="*:bg-white *:text-left *:border *:not-first:border-l-0 *:border-black *:px-4 *:py-2 *:data-[sort-active=true]:bg-blue-cool-5v">
          <th scope="row" class="font-normal sticky left-0">Declaration of Independence</th>
          <td class="whitespace-nowrap">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
          <td class="whitespace-nowrap">1776</td>
        </tr>
        <tr class="*:bg-white *:text-left *:border *:not-first:border-l-0 *:border-black *:px-4 *:py-2 *:data-[sort-active=true]:bg-blue-cool-5v">
          <th scope="row" class="font-normal sticky left-0">Bill of Rights</th>
          <td class="whitespace-nowrap">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
          <td class="whitespace-nowrap">1791</td>
        </tr>
        <tr class="*:bg-white *:text-left *:border *:not-first:border-l-0 *:border-black *:px-4 *:py-2 *:data-[sort-active=true]:bg-blue-cool-5v">
          <th scope="row" class="font-normal sticky left-0">Declaration of Sentiments</th>
          <td class="whitespace-nowrap">A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
          <td class="whitespace-nowrap">1848</td>
        </tr>
        <tr class="*:bg-white *:text-left *:border *:not-first:border-l-0 *:border-black *:px-4 *:py-2 *:data-[sort-active=true]:bg-blue-cool-5v">
          <th scope="row" class="font-normal sticky left-0">Emancipation Proclamation</th>
          <td class="whitespace-nowrap">An executive order granting freedom to slaves in designated southern states.</td>
          <td class="whitespace-nowrap">1863</td>
        </tr>
      </tbody>
    </table>
  </div>
```

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

### HTML Structure for USWDS + Tailwind Project (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This HTML snippet provides a basic structure for an index.html file, including meta tags, title, linking the main stylesheet, and setting up a body with USWDS-specific classes for layout and a sample button. It also includes a script tag to load the main JavaScript file.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>USWDS + Tailwind</title>
    <link rel="stylesheet" href="../build/css/styles.css" />
  </head>
  <body class="font-source-sans">
    <div class="py-4 px-3 mx-auto max-w-screen-desktop">
      <h1 class="text-4xl font-bold max-w-prose mb-4">
        Welcome to USWDS + Tailwind!
      </h1>
      <button
        type="button"
        class="rounded-sm font-bold leading-none cursor-pointer text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
      >
        Default
      </button>
    </div>

    <script type="module" src="../assets/js/main.js"></script>
  </body>
</html>
```

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

### USWDS Tailwind Grid Layout Examples (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/grid.mdx

Demonstrates the usage of the USWDS Tailwind grid system for creating flexible page layouts. This example showcases a 12-column base, custom column spans, and responsive adjustments for tablet viewports.

```html
<div class="space-y-4">

    <!-- Used to illustrate the 12 column layout -->
    <div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
      <div class="flex justify-center leading-none">1</div>
      <div class="flex justify-center leading-none">2</div>
      <div class="flex justify-center leading-none">3</div>
      <div class="flex justify-center leading-none">4</div>
      <div class="flex justify-center leading-none">5</div>
      <div class="flex justify-center leading-none">6</div>
      <div class="flex justify-center leading-none">7</div>
      <div class="flex justify-center leading-none">8</div>
      <div class="flex justify-center leading-none">9</div>
      <div class="flex justify-center leading-none">10</div>
      <div class="flex justify-center leading-none">11</div>
      <div class="flex justify-center leading-none">12</div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-3">
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-4">
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black">
        (col-span-1)
      </div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid grid-cols-12">
      <div class="bg-blue-warm-10 p-4 border border-black col-span-4">
        .col-span-4
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black col-span-4">
        .col-span-4
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black col-span-4">
        .col-span-4
      </div>
    </div>

    <div class="mx-auto max-w-screen-desktop grid tablet:grid-cols-12">
      <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
        .tablet:col-span-4
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
        .tablet:col-span-4
      </div>
      <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
        .tablet:col-span-4
      </div>
    </div>
  </div>
```

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

### Tooltip Example with Tailwind CSS

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/tooltip.mdx

This snippet demonstrates the implementation of a tooltip component using Tailwind CSS classes. It includes examples for tooltips positioned at the top, right, bottom, and left. The component requires a JavaScript plugin for full functionality, which is noted in the documentation.

```html
<div class="p-12 space-y-12">
  <div data-part="tooltip-root" data-placement="top" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on top
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Top</div>
  </div>

   <div data-part="tooltip-root" data-placement="right" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on right
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Right</div>
  </div>

   <div data-part="tooltip-root" data-placement="bottom" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on bottom
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Bottom</div>
  </div>

   <div data-part="tooltip-root" data-placement="left" class="relative isolate">
    <button
      data-part="tooltip-trigger"
      type="button"
      class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v cursor-pointer"
    >
      Show on left
    </button>
    <div
      data-part="tooltip-content"
      class="bg-gray-90 rounded-sm text-gray-5 p-2 whitespace-pre z-50 w-auto data-[state=open]:opacity-100 opacity-0 absolute transition-opacity duration-100 ease-in-out after:block after:absolute after:h-2 after:w-2 after:bg-inherit after:rotate-45 after:translate-(--caret-translate) after:left-(--caret-left) after:top-(--caret-top)"
    >Left</div>
  </div>
</div>
```

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

### Run Development Server for Theme Package

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/packages/theme/README.md

Starts a local development server for the theme package. This command is used during development to preview changes and test the theme. Refer to package.json for other available scripts.

```bash
npm run dev
```

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

### Date Picker Component Example in HTML

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/date-range-picker.mdx

This HTML snippet defines a date range picker component. It includes input fields for the start and end dates, along with buttons to trigger the calendar view. The component uses data-part attributes for element identification and Tailwind CSS for styling, providing a visually appealing and interactive date selection interface.

```html
<div
    data-part="date-range-picker-root"
    id="date-range-picker-1"
    class="space-y-6"
  >
    <div class="max-w-mobile-lg">
      <label
        id="event-date-start-label"
        for="date-picker:date-range-picker-1:input-start"
        class="text-sm font-medium text-gray-900 min-w-0 shrink-0"
      >Start Date</label>
      <div id="event-date-start-hint" class="text-gray-50">mm/dd/yyyy</div>
      <div class="flex relative">
        <input
          data-part="date-range-picker-start-input"
          type="text"
          placeholder="MM/DD/YYYY"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
          aria-describedby="event-date-start-hint"
          aria-labelledby="event-date-start-label"
        />
        <button
          data-part="date-picker-trigger"
          data-target="start"
          class="cursor-pointer w-12 bg-transparent hover:bg-gray-10! data-[state=open]:bg-gray-5 active:bg-gray-30 focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 flex items-center justify-center"
          aria-label="Open calendar for start date"
        >
          <span class="icon-[material-symbols--calendar-today] size-7"></span>
        </button>
      </div>
    </div>
    <div class="max-w-mobile-lg">
      <label
        id="event-date-end-label"
        for="date-picker:date-range-picker-1:input-end"
        class="text-sm font-medium text-gray-900 min-w-0 shrink-0"
      >End Date</label>
      <div id="event-date-end-hint" class="text-gray-50">mm/dd/yyyy</div>
      <div class="flex relative">
        <input
          data-part="date-range-picker-end-input"
          type="text"
          placeholder="MM/DD/YYYY"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
          aria-describedby="event-date-end-hint"
          aria-labelledby="event-date-end-label"
        />
        <button
          data-part="date-picker-trigger"
          data-target="end"
          class="cursor-pointer w-12 bg-transparent hover:bg-gray-10! data-[state=open]:bg-gray-5 active:bg-gray-30 focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 flex items-center justify-center"
          aria-label="Open calendar for end date"
        >
          <span class="icon-[material-symbols--calendar-today] size-7"></span>
        </button>
        <div
          data-part="date-picker-content"
          class="bg-gray-5 w-mobile absolute top-10 right-0 not-data-[state=open]:hidden"
        >
          <div data-part="date-picker-day">
            <div class="flex w-full justify-between">
              <div class="flex">
                <button
                  data-part="date-picker-nav-prev"
                  data-unit="year"
                  class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
                >
                  <span class="icon-[material-symbols--keyboard-double-arrow-left] size-6"></span>
                </button>
                <button
                  data-part="date-picker-nav-prev"
                  data-unit="month"
                  class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
                >
                  <span class="icon-[material-symbols--keyboard-arrow-left] size-6"></span>
                </button>
              </div>
              <div class="flex grow-1 justify-center">
                <button
                  data-part="date-view-trigger"
                  data-value="month"
                  class="h-10 px-1 flex items-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4"
                ></button>
                <button
                  data-part="date-view-trigger"
                  data-value="year"
                  class="h-10 px-1 flex items-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4"
                ></button>
              </div>
              <div class="flex">
                <button
                  data-part="date-picker-nav-next"
                  data-unit="month"

```

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

### Basic Table Example (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/table.mdx

Demonstrates a simple HTML table structure using USWDS and Tailwind CSS classes for styling. This includes basic headers, rows, and data cells with specified borders and padding.

```html
<div class="table-container">
    <table class="usa-table">
      <thead>
        <tr>
          <th scope="col">Document title</th>
          <th scope="col">Description</th>
          <th scope="col">Year</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Declaration of Independence</th>
          <td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
          <td>1776</td>
        </tr>
        <tr>
          <th scope="row">Emancipation Proclamation</th>
          <td>An executive order granting freedom to slaves in designated southern states.</td>
          <td>1863</td>
        </tr>
      </tbody>
    </table>
  </div>
```

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

### Create and Navigate Project Directory

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/examples/vanilla-ts/typography.html

This snippet demonstrates how to create a new project directory and initialize a Node.js project within it using npm. It's a common starting point for many web development projects.

```bash
mkdir my-project && cd my-project
npm init -y
```

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

### Configure JavaScript for USWDS Components (JavaScript)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This JavaScript snippet shows two methods for initializing USWDS components using the '@uswds-tailwind/compat' package. It covers both auto-initialization of all components and manual initialization of specific components like modals and accordions after the DOM is loaded.

```javascript
// Option 1: Auto-initialize all components
import '@uswds-tailwind/compat/auto'

// Option 2: Manual initialization with only the components you need
import { modalInit, accordionInit } from '@uswds-tailwind/compat'
document.addEventListener('DOMContentLoaded', () => {
  modalInit()
  accordionInit()
})
```

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

### Configure CSS with USWDS Theme and Fonts (CSS)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This CSS snippet configures the project's main stylesheet by importing various Google Fonts, Tailwind CSS, and the USWDS Tailwind theme. It ensures that all necessary styles and typography are loaded correctly for the application.

```css
/* Only import the fonts you need! */
@import "@fontsource-variable/open-sans";
@import "@fontsource-variable/public-sans";
@import "@fontsource-variable/roboto-mono";
@import "@fontsource-variable/source-sans-3";
@import "@fontsource-variable/merriweather";

@import "tailwindcss";
@import "@uswds-tailwind/theme";
```

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

### Vue Integration: Declarative Accordion Component

Source: https://context7.com/ihiutch/uswds-tailwind/llms.txt

Demonstrates integrating USWDS Tailwind Accordion components within a Vue.js application using the declarative data-attribute API. This example utilizes Vue's `onMounted` and `onUnmounted` lifecycle hooks for Accordion instance management, ensuring proper setup and cleanup.

```vue
<!-- Vue Component -->
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { Accordion } from '@uswds-tailwind/compat'

const accordionRef = ref<HTMLElement>()
let accordionInstance: Accordion

onMounted(() => {
  if (accordionRef.value) {
    accordionInstance = new Accordion(accordionRef.value, {
      multiple: true
    })
  }
})

onUnmounted(() => {
  accordionInstance?.destroy()
})
</script>

<template>
  <div ref="accordionRef" data-part="accordion-root">
    <!-- Accordion markup -->
  </div>
</template>

```

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

### Configure .gitignore for Project (Shell)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/pages/getting-started.mdx

This shell snippet defines a .gitignore file to prevent unnecessary files and directories, such as node_modules, Parcel cache, and build outputs, from being committed to version control. It's crucial for maintaining a clean repository, with a specific note about the 'build' directory if manual compilation is performed.

```shell
node_modules

.parcel-cache

build 
```

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

### Date Picker Day Button Styling (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/date-range-picker.mdx

This HTML snippet defines the styling for individual day buttons within the date picker. It includes classes for hover effects, focus states, range selection (start, end, in-range), and disabled states, ensuring clear visual feedback for users.

```html
<button
                      data-part="date-picker-date-button"
                      class="w-full py-1.5 hover:bg-gray-10 cursor-pointer text-center data-[month-context=prev]:text-gray-warm-60 data-[month-context=next]:text-gray-warm-60 data-[focus]:outline-2 data-[focus]:outline-blue-warm-80v data-[focus]:-outline-offset-2 focus:outline-4! focus:outline-blue-40v! focus:-outline-offset-4! data-[range-start]:bg-blue-warm-60v data-[range-start]:text-white data-[range-start]:rounded-s-sm data-[range-end]:bg-blue-warm-60v data-[range-end]:text-white data-[range-end]:rounded-e-sm data-[in-range]:bg-blue-warm-10v data-[in-range]:text-ink data-[range-hover]:bg-blue-warm-10v active:bg-gray-30 data-selected:active:bg-blue-warm-70v disabled:cursor-not-allowed disabled:opacity-60 disabled:text-black/30 disabled:hover:bg-transparent"
                    ></button>
```

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

### Input Mask Component with Examples (HTML)

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/input-mask.mdx

This HTML component showcases input masks for various formats like SSN, phone numbers, ZIP codes, and alphanumeric strings. It utilizes Tailwind CSS for styling and custom data attributes for functionality. The input elements have specific patterns and placeholders to guide user input.

```html
<div class="space-y-12">

    <div
      class="max-w-xs"
      data-part="input-mask-root"
    >
      <label
        for="ssn"
        class="block"
      >Social Security Number</label>
      <div
        id="input-hint"
        class="text-gray-50"
      >For example, 123 45 6789</div>
      <div class="mt-2 relative">
        <div
          aria-hidden="true"
          class="absolute inset-0 p-2 pointer-events-none border inline-flex whitespace-pre"
        >
          <span
            data-part="placeholder"
            class="text-gray-50"
          ></span>
        </div>
        <input
          data-part="input-mask-input"
          id="ssn"
          pattern="^(?!(000|666|9))\d{3} (?!00)\d{2} (?!0000)\d{4}$"
          placeholder="___ __ ____"
          aria-describedby="input-hint"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
        />
      </div>
    </div>

    <div
      class="max-w-xs"
      data-part="input-mask-root"
    >
      <label
        for="phone"
        class="block"
      >US Telephone Number</label>
      <div
        id="input-hint-phone"
        class="text-gray-50"
      >For example, (123) 456-7890</div>
      <div class="mt-2 relative">
        <div
          aria-hidden="true"
          class="absolute inset-0 p-2 pointer-events-none border inline-flex whitespace-pre"
        >
          <span
            data-part="placeholder"
            class="text-gray-50"
          ></span>
        </div>
        <input
          data-part="input-mask-input"
          id="phone"
          pattern="\d{3}-\d{3}-\d{4}"
          placeholder="___-___-____"
          aria-describedby="input-hint-phone"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
        />
      </div>
    </div>


    <div
      class="max-w-xs"
      data-part="input-mask-root"
    >
      <label
        for="zip"
        class="block"
      >ZIP Code</label>
      <div
        id="input-hint-zip"
        class="text-gray-50"
      >For example, 12345-6789</div>
      <div class="mt-2 relative">
        <div
          aria-hidden="true"
          class="absolute inset-0 p-2 pointer-events-none border inline-flex whitespace-pre"
        >
          <span
            data-part="placeholder"
            class="text-gray-50"
          ></span>
        </div>
        <input
          data-part="input-mask-input"
          pattern="^[0-9]{5}(?:-[0-9]{4})?$"
          placeholder="_____-____"
          id="zip"
          aria-describedby="input-hint-zip"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
        />
      </div>
    </div>

    <div
      class="max-w-xs"
      data-part="input-mask-root"
    >
      <label
        for="alpha"
        class="block"
      >Alphanumeric</label>
      <div
        id="input-hint-alpha"
        class="text-gray-50"
      >For example, A1B 2C3</div>
      <div class="mt-2 relative">
        <div
          aria-hidden="true"
          class="absolute inset-0 p-2 pointer-events-none border inline-flex whitespace-pre"
        >
          <span
            data-part="placeholder"
            class="text-gray-50"
          ></span>
        </div>
        <input
          data-part="input-mask-input"
          pattern="\w\d\w \d\w\d"
          placeholder="___ ___
          data-charset="A#A #A#"
          id="alpha"
          aria-describedby="input-hint-alpha"
          class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 placeholder:invisible"
        />
      </div>
    </div>

  </div>
```

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

### Responsive Grid Layouts with Tailwind CSS

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/grid.mdx

Demonstrates a responsive 12-column grid system using Tailwind CSS utility classes. The layouts adapt based on viewport size, utilizing classes like `grid-cols-12` and `tablet:col-span-*`. This code snippet showcases how to create flexible and responsive interfaces that adjust to different screen dimensions.

```html
<div class="space-y-4">

  <!-- Used to illustrate the 12 column layout -->
  <div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
    <div class="flex justify-center leading-none">1</div>
    <div class="flex justify-center leading-none">2</div>
    <div class="flex justify-center leading-none">3</div>
    <div class="flex justify-center leading-none">4</div>
    <div class="flex justify-center leading-none">5</div>
    <div class="flex justify-center leading-none">6</div>
    <div class="flex justify-center leading-none">7</div>
    <div class="flex justify-center leading-none">8</div>
    <div class="flex justify-center leading-none">9</div>
    <div class="flex justify-center leading-none">10</div>
    <div class="flex justify-center leading-none">11</div>
    <div class="flex justify-center leading-none">12</div>
  </div>

  <div class="mx-auto max-w-screen-desktop grid grid-cols-12">
    <div class="bg-blue-warm-10 p-4 border border-black">
      (col-span-1)
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-2">
      .col-span-2
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-3">
      .col-span-3
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-4">
      .col-span-4
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-2">
      .col-span-2
    </div>
  </div>

  <div class="mx-auto max-w-screen-desktop grid tablet:grid-cols-12">
    <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-8">
      .tablet:col-span-8
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-2">
      .tablet:col-span-2
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-2">
      .tablet:col-span-2
    </div>
  </div>

  <div class="mx-auto max-w-screen-desktop grid grid-cols-12">
    <div class="bg-blue-warm-10 p-4 border border-black col-span-full tablet:col-span-8">
      .tablet:col-span-8
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
      .col-span-6.tablet:col-span-4
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
      .col-span-6.tablet:col-span-4
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
      .col-span-6.tablet:col-span-4
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
      .col-span-6.tablet:col-span-4
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6">
      .col-span-6
    </div>
    <div class="bg-blue-warm-10 p-4 border border-black col-span-6">
      .col-span-6
    </div>
  </div>
</div>
```

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

### Illustrating 12-Column Layout with Tailwind CSS Grid

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/grid.mdx

This code snippet visualizes a 12-column grid system using Tailwind CSS. It's useful for understanding the foundational structure of responsive layouts. No external dependencies are required beyond Tailwind CSS.

```html
<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
  <div class="flex justify-center leading-none">1</div>
  <div class="flex justify-center leading-none">2</div>
  <div class="flex justify-center leading-none">3</div>
  <div class="flex justify-center leading-none">4</div>
  <div class="flex justify-center leading-none">5</div>
  <div class="flex justify-center leading-none">6</div>
  <div class="flex justify-center leading-none">7</div>
  <div class="flex justify-center leading-none">8</div>
  <div class="flex justify-center leading-none">9</div>
  <div class="flex justify-center leading-none">10</div>
  <div class="flex justify-center leading-none">11</div>
  <div class="flex justify-center leading-none">12</div>
</div>
```

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

### Install Tailwind Theme Package with npm

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/packages/theme/README.md

Installs the theme package using npm. Replace '@your-org' with the correct organization scope. This is the primary method for integrating the theme into projects.

```bash
npm install @your-org/theme
```

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

### HTML List Component Example

Source: https://github.com/ihiutch/uswds-tailwind/blob/next/apps/docs/src/content/components/list.mdx

This snippet demonstrates the implementation of a List component using HTML, styled with USWDS and Tailwind CSS. It includes examples of unordered, ordered, and unstyled list variations.

```html
<div class="space-x-12 flex">

  <ul class="list-disc pl-8 mt-4 space-y-1">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
  </ul>

  <ol class="list-decimal pl-8 mt-4 space-y-1">
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
  </ol>

  <ul class="list-none">
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
  </ul>

</div>
```