React components for the U.S. Web Design System using TailwindCSS.
Please visit the Storybook for a list of components and examples.
pnpm install --save-dev tailwindcss
pnpm install react @rise8/uswds-tw-reactHighly 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],
};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;This library is ESM only. Testing configuration may vary depending on your testing framework.
To use with Jest, it is recommended to use @swc/jest for transforming the library.
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',
},
};Explore new opportunities with Rise8.