USWDS + Tailwind

https://v2.uswds-tailwind.com
Admin
USWDS + Tailwind is a comprehensive federal design system combining the U.S. Web Design System with...
Tokens:109,607
Snippets:353
Trust Score:6.1
Update:9 months ago
Show doc for...
Tokens:
Raw
### Initialize Project and Install Dependencies

Source: https://v2.uswds-tailwind.com/getting-started

This snippet demonstrates how to initialize a new project directory, install essential dependencies for USWDS and Tailwind CSS, along with necessary fonts and Tailwind plugins. It ensures all required packages are in place before proceeding with project configuration.

```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

Source: https://v2.uswds-tailwind.com/getting-started

This command sets up the basic directory structure for the project, including source files, assets, JavaScript, and CSS subdirectories. It also creates essential files like index.html, main.js, styles.css, and a .gitignore file.

```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
```

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

### List Component Example (HTML)

Source: https://v2.uswds-tailwind.com/components/list

Demonstrates the usage of the List component to create unordered, ordered, and unstyled lists. This example uses standard HTML structure styled with USWDS and Tailwind CSS classes.

```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>
```

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

### Card Component Examples (HTML)

Source: https://v2.uswds-tailwind.com/components/card

This snippet demonstrates various configurations of the Card component, including default, image-first, heading-first, inset media, and exdent media layouts. These examples utilize Tailwind CSS classes for styling and responsiveness.

```html
<ul class="@container grid grid-cols-6 gap-y-8 gap-x-4">

  <!-- Default -->
  <li class="bg-white flex flex-col col-span-6 @tablet:col-span-3 @desktop:col-span-2">
    <div class="border-x-2 border-t-2 border-gray-10 rounded-t px-6 pt-6 pb-2">
      <h2 class="font-bold font-merriweather text-lg">Card</h2>
    </div>
    <div class="border-x-2 border-gray-10 px-6 py-2 grow">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
    </div>
    <div class="border-x-2 border-b-2 border-gray-10 rounded-b px-6 pb-6 pt-2">
      <button class="rounded-sm 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">Visit Florida Keys</button>
    </div>
  </li>

  <!-- Image First -->
  <li class="bg-white flex flex-col col-span-6 @tablet:col-span-3 @desktop:col-span-2">
    <div class="border-x-2 border-gray-10 px-6 pt-6 pb-2">
      <h2 class="font-bold font-merriweather text-lg">Card</h2>
    </div>
    <div class="border-x-2 border-t-2 border-gray-10 rounded-t overflow-hidden -order-1">
      <img class="aspect-video object-cover" src="/assets/images/preview.jpg" alt="">
    </div>
    <div class="border-x-2 border-gray-10 px-6 py-2 grow">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
    </div>
    <div class="border-x-2 border-b-2 border-gray-10 rounded-b px-6 pb-6 pt-2">
      <button class="rounded-sm 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">Visit Florida Keys</button>
    </div>
  </li>

  <!-- Heading First -->
  <li class="bg-white flex flex-col col-span-6 @tablet:col-span-3 @desktop:col-span-2">
    <div class="border-x-2 border-t-2 border-gray-10 rounded-t px-6 pt-6 pb-2">
      <h2 class="font-bold font-merriweather text-lg">Media with header first</h2>
    </div>
    <div class="border-x-2 border-gray-10 overflow-hidden">
      <img class="aspect-video object-cover" src="/assets/images/preview.jpg" alt="">
    </div>
    <div class="border-x-2 border-gray-10 px-6 pt-4 pb-2 grow">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
    </div>
    <div class="border-x-2 border-b-2 border-gray-10 rounded-b px-6 pb-6 pt-2">
      <button class="rounded-sm 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">Visit Florida Keys</button>
    </div>
  </li>

  <!-- Inset Media -->
  <li class="bg-white flex flex-col col-span-6 @tablet:col-span-3 @desktop:col-span-2">
    <div class="border-x-2 border-gray-10 px-6 pt-6 pb-2">
      <h2 class="font-bold font-merriweather text-lg">Inset Media</h2>
    </div>
    <div class="border-x-2 border-t-2 rounded-t border-gray-10 -order-1">
      <img class="aspect-video object-cover p-6 pb-0" src="/assets/images/preview.jpg" alt="">
    </div>
    <div class="border-x-2 border-gray-10 px-6 py-2 grow">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
    </div>
    <div class="border-x-2 border-b-2 border-gray-10 rounded-b px-6 pb-6 pt-2">
      <button class="rounded-sm 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">Visit Florida Keys</button>
    </div>
  </li>

  <!-- Exdent Media -->
  <li class="bg-white flex flex-col col-span-6 @tablet:col-span-3 @desktop:col-span-2">
    <div class="border-x-2 border-gray-10  px-6 pt-6 pb-2">
      <h2 class="font-bold font-merriweather text-lg">Exdent Media</h2>
    </div>
    <div class="border-gray-10 rounded-t overflow-hidden -order-1">
      <img class="aspect-video object-cover" src="/assets/images/preview.jpg" alt="">
    </div>
    <div class="border-x-2 border-gray-10 px-6 py-2 grow">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
    </div>
    <div class="border-x-2 border-b-2 border-gray-10 rounded-b px-6 pb-6 pt-2">
      <button class="rounded-sm 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">Visit Florida Keys</button>
    </div>
  </li>
</ul>
```

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

### HTML/Tailwind CSS: 12-Column Grid Layout Example

Source: https://v2.uswds-tailwind.com/components/grid

This snippet demonstrates a 12-column grid layout using Tailwind CSS classes. It visualizes each column and then shows how to create a 3-column grid with gaps. This serves as a foundational example for grid-based layouts.

```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>
    <div class="mx-auto max-w-screen-desktop">
      grid
    </div>
    <div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-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>

  <div>
    <div class="mx-auto max-w-screen-desktop">
      flex
    </div>
    <div class="mx-auto max-w-screen-desktop flex flex-wrap">
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
    </div>
  </div>

  <div>
    <div class="mx-auto max-w-screen-desktop">
      flex &amp; gap
    </div>
    <div class="mx-auto max-w-screen-desktop flex flex-wrap gap-4">
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/3">
        .w-1/3
      </div>
    </div>
  </div>

  <div>
    <div class="mx-auto max-w-screen-desktop">
      flex auto size
    </div>
    <div class="mx-auto max-w-screen-desktop flex flex-wrap">
      <div class="bg-red-warm-10 p-4 border border-black">
        (w-auto)
      </div>
      <div class="bg-red-warm-10 p-4 border border-black">
        (w-auto)
      </div>
      <div class="bg-red-warm-10 p-4 border border-black">
        (w-auto)
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/4">
        .w-1/4
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/4">
        .w-1/4
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/4">
        .w-1/4
      </div>
      <div class="bg-red-warm-10 p-4 border border-black w-1/4">
        .w-1/4
      </div>
    </div>
  </div>

  <div>
    <div class="mx-auto max-w-screen-desktop">
      flex fill
    </div>
    <div class="mx-auto max-w-screen-desktop flex flex-wrap">
      <div class="bg-red-warm-10 p-4 border border-black">
        (w-auto)
      </div>
      <div class="bg-red-warm-10 p-4 border border-black flex-1">
        .flex-1
      </div>
    </div>
  </div>

  <div>
    <div class="mx-auto max-w-screen-desktop">
      flex fill multiple
    </div>
    <div class="mx-auto max-w-screen-desktop flex flex-wrap">
      <div class="bg-red-warm-10 p-4 border border-black flex-1">
        .flex-1
      </div>
      <div class="bg-red-warm-10 p-4 border border-black flex-1">
        .flex-1
      </div>
      <div class="bg-red-warm-10 p-4 border border-black flex-1">
        .flex-1
      </div>
    </div>
  </div>

</div>
```

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

### Tooltip Example with Multiple Placements (HTML)

Source: https://v2.uswds-tailwind.com/components/tooltip

Demonstrates the Tooltip component with different placement options (top, right, bottom, left). This example requires the Tooltip JavaScript plugin to function correctly. The structure includes a root element, a trigger button, and the content div for the tooltip message.

```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>
```

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

### HTML Structure

Source: https://v2.uswds-tailwind.com/getting-started

This is the basic HTML structure for the index.html file. It includes meta tags, a link to the compiled CSS, and a simple content structure with a heading and a button. It also links to the main JavaScript file for component initialization.

```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>
```

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

### Font Normalization Examples with USWDS and Tailwind CSS

Source: https://v2.uswds-tailwind.com/typography

These examples showcase how to normalize font sizes for different fonts using USWDS and Tailwind CSS. Each code block represents a specific font and demonstrates its normalized rendering. The `font-normalization` CSS variable is used to achieve this consistency.

```html
<div class="grid desktop:grid-cols-3 grid-cols-2 desktop:gap-4 tablet:gap-x-8 gap-4 mt-4 not-docs-prose" aria-hidden="true">
<div>
  <p class="font-medium mb-1">Open Sans</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-open-sans text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Open Sans Variable', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Public Sans</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-public-sans text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Public Sans Variable', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Merriweather</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-merriweather text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Merriweather', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Source Sans</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-source-sans text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Source Sans 3 Variable', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Roboto Mono</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-roboto-mono text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Roboto Mono Variable', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Georgia</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-georgia text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Georgia', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
<div>
  <p class="font-medium mb-1">Helvetica</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative">
        <span role="presentation" class="font-helvetica text-8xl leading-none relative z-10">Alg</span>
        <span role="presentation" class="text-8xl leading-none text-red-cool-30v absolute left-0" style={{ fontFamily: 'Helvetica', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
</div>
```

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

### Configure JavaScript Initialization

Source: https://v2.uswds-tailwind.com/getting-started

This JavaScript code snippet shows two methods for initializing USWDS components: automatic initialization of all components or manual initialization of specific components like modals and accordions. It should be placed in the main JavaScript file.

```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()
})
```

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

### Language Selector Examples

Source: https://v2.uswds-tailwind.com/components/language-selector

Demonstrates the usage of the Language Selector component in both a toggle and a dropdown format.

```APIDOC
## Language Selector Examples

### Toggle

This example shows a simple, non-interactive link for language selection. It uses basic HTML and CSS classes.

```html
<a href="#" class="inline-block rounded-sm 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">
  <span lang="en">Español</span>
</a>
```

### Dropdown

This example showcases the interactive dropdown version of the Language Selector. It requires the Dropdown JavaScript plugin and uses Alpine.js directives for its functionality.

**Requires:** [Dropdown](/javascript#dropdown)

```html
<div class="space-y-8">
  <section>
    <div data-part="dropdown-root">
      <button
        data-part="dropdown-trigger"
        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"
      >
        Languages
      </button>
      <div
        data-part="dropdown-content"
        class="outline-hidden bg-blue-warm-80v w-60 divide-y divide-gray-cool-10 z-30"
      >
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="ar">
            <strong>العربية</strong>
            (Arabic) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="zh">
            <strong>简体字</strong>
            (Chinese - Simplified) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="en">
            <strong>English</strong>
          </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="es">
            <strong>Español</strong>
            (Spanish) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="fr">
            <strong>Français</strong>
            (French) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="it">
            <strong>Italiano</strong>
            (Italian) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="ru">
            <strong>Pусский</strong>
            (Russian) </span>
        </a>
      </div>
    </div>
  </section>
</div>
```
```

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

### HTML Text Input Examples with Tailwind CSS

Source: https://v2.uswds-tailwind.com/components/text-input

This snippet demonstrates various text input fields styled using Tailwind CSS classes, based on the USWDS design system. It includes examples for default, description, success, and error states. No specific JavaScript dependencies are shown, relying solely on HTML structure and CSS styling.

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

  <div class="max-w-xs">
    <label for="default" class="block">Default input</label>
    <div class="mt-2 relative">
      <input id="default" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="description" class="block">Description input</label>
    <div id="input-hint" class="text-gray-50">An input description</div>
    <div class="mt-2 relative">
      <input id="description" aria-describedby="input-hint" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="success" class="block">Success input</label>
    <div class="mt-2 relative">
      <input id="success" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-valid="true"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="error" class="block">Error input</label>
    <div class="mt-2 relative">
      <input id="error" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-invalid="true"/>
    </div>
  </div>

</div>
```

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

### Process List - Custom Sizing (HTML)

Source: https://v2.uswds-tailwind.com/components/process-list

A customizable process list component using USWDS and Tailwind CSS, featuring list items with both a heading and descriptive paragraph text. This example demonstrates how to adjust the content within each step while maintaining the list's structure and numbering.

```html
<ol class="pt-5 pl-4 [counter-reset:usa-numbered-list]">
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Start a process</h4>
      <p class="text-xl font-light mt-2">Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</p>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Proceed to the second step.</h4>
      <p class="text-xl font-light mt-2">Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Complete the step-by-step process</h4>
      <p class="text-xl font-light mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.</p>
    </div>
  </li>
</ol>
```

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

### gitignore Configuration

Source: https://v2.uswds-tailwind.com/getting-started

This .gitignore file specifies files and directories that should be ignored by Git, preventing them from being committed to the repository. It includes node_modules, build artifacts, and temporary cache files.

```shell
node_modules

.parcel-cache

build 

```

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

### Configure CSS Styles

Source: https://v2.uswds-tailwind.com/getting-started

This CSS code imports necessary fonts, Tailwind CSS, and USWDS theme directives into the main stylesheet. It ensures that all styling components are correctly loaded for the project.

```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";
```

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

### Grid Layout Examples using Tailwind CSS

Source: https://v2.uswds-tailwind.com/components/grid

Demonstrates the implementation of a 12-column grid system using Tailwind CSS classes. This snippet showcases different column configurations, including a 12-column number display, 3-column layout, 4-column layout, and responsive adjustments for tablet breakpoints. It is useful for structuring website content and ensuring responsiveness.

```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>

```

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

### Initialize File Input Component with USWDS + Tailwind

Source: https://v2.uswds-tailwind.com/javascript

Demonstrates how to set up the File Input component using the '@uswds-tailwind/compat' library. The initialization is performed once the DOMContentLoaded event is dispatched.

```javascript
import { fileInputInit } from '@uswds-tailwind/compat'

document.addEventListener('DOMContentLoaded', () => {
fileInputInit()
})
```

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

### Render Helvetica Font with USWDS Tailwind

Source: https://v2.uswds-tailwind.com/typography

This example demonstrates rendering the 'Helvetica' font using USWDS and Tailwind CSS. It uses a combination of HTML elements and Tailwind utility classes to achieve a large font display with baseline guides, suitable for visual comparisons. No JavaScript is needed for this styling.

```html
<div>
  <p class="font-medium mb-1">Helvetica</p>
  <div class="border-t-2 border-b border-t-blue-50v border-b-blue-50v/60 pb-8">
    <div class="border-b-2 border-blue-50v w-full relative flex items-baseline px-4 h-20">
      <div class="text-8xl h-[1ex] border-t border-dashed border-t-blue-50v/60 absolute inset-x-0 bottom-0 pointer-events-none"></div>
      <div class="relative z-10">
        <span role="presentation" class="text-8xl leading-none" style={{ fontFamily: 'Helvetica Neue', '--font-normalization': '1.0' }}>Alg</span>
      </div>
    </div>
  </div>
</div>
```
Tokens:
Raw