U.S. Web Design System TailwindCSS React

React components for the U.S. Web Design System using TailwindCSS.

Please visit the Storybook for a list of components and examples.

Installation

pnpm install --save-dev tailwindcss
pnpm install react @rise8/uswds-tw-react

Configuration

Adding Design Tokens

Highly recommended to use @rise8/tailwindcss-uswds-tokens preset with your TailwindCSS config.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
import USWDSTokens from '@rise8/tailwindcss-uswds-tokens';
export default {
  // ...
  plugins: [USWDSTokens],
};

Adding the Global CSS

In your global css file, import the @rise8/uswds-tw-react/globals.css css file.

@import '@rise8/uswds-tw-react/globals.css';

/** @tailwind base should not be included, 
as it is provided through uswds-tw-react **/
@tailwind components;
@tailwind utilities;

Testing

This library is ESM only. Testing configuration may vary depending on your testing framework.

Jest Config

To use with Jest, it is recommended to use @swc/jest for transforming the library.

• @swc/jest
• ts-jest

pnpm install --save-dev jest @swc/core @swc/jest

// jest.config.js
export default {
  // ...
  transformIgnorePatterns: ['node_modules/(?!@rise8/uswds-tw-react)/'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            tsx: true,
            dynamicImport: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
              importSource: 'react',
            },
          },
        },
      },
    ],
  },
};

You can use ts-jest but it is not as performant as @swc/jest.

// jest.config.js
export default {
  // ...
  transformIgnorePatterns: ['node_modules/(?!@rise8/uswds-tw-react)/'],
  transform: {
    '^.+\\.(t|j)sx?$': 'ts-jest',
  },
};

Careers

Explore new opportunities with Rise8.