JavaScript

USWDS + Tailwind relies on Alpine.js plugins to power components' functionality. You can install each them independently, as you need them.

Install and import

You can initialize your components like so:

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

JavaScript Components

Install the custom plugins by copying and pasting the following code. Not all of the plugins are required and you can install or omit them as necessary for your project.

Accordion

import { accordionInit } from '@uswds-tailwind/compat'

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

Character Count

import { characterCountInit } from '@uswds-tailwind/compat'

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

Collapse

import { collapseInit } from '@uswds-tailwind/compat'

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

Combobox

import { comboboxInit } from '@uswds-tailwind/compat'

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

import { dropdownInit } from '@uswds-tailwind/compat'

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

File Input

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

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

Input Mask

import { inputMaskInit } from '@uswds-tailwind/compat'

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

import { modalInit } from '@uswds-tailwind/compat'

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

import { tooltipInit } from '@uswds-tailwind/compat'

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