### 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
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
``` -------------------------------- ### 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 ``` -------------------------------- ### 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
1
2
3
4
5
6
7
8
9
10
11
12
grid
(col-span-1)
(col-span-1)
(col-span-1)
flex
.w-1/3
.w-1/3
.w-1/3
flex & gap
.w-1/3
.w-1/3
.w-1/3
flex auto size
(w-auto)
(w-auto)
(w-auto)
.w-1/4
.w-1/4
.w-1/4
.w-1/4
flex fill
(w-auto)
.flex-1
flex fill multiple
.flex-1
.flex-1
.flex-1
``` -------------------------------- ### 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
Top
Right
Bottom
Left
``` -------------------------------- ### 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 USWDS + Tailwind

Welcome to USWDS + Tailwind!

``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Español ``` ### 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
العربية (Arabic) 简体字 (Chinese - Simplified) English Español (Spanish) Français (French) Italiano (Italian) Pусский (Russian)
``` ``` -------------------------------- ### 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
An input description
``` -------------------------------- ### 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

  1. Start a process

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

  2. Proceed to the second step.

    Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

  3. Complete the step-by-step process

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

``` -------------------------------- ### 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
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
.col-span-4
.col-span-4
.col-span-4
.tablet:col-span-4
.tablet:col-span-4
.tablet:col-span-4
``` -------------------------------- ### 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

Helvetica

Alg
```