@rise8/uswds-tw-react
v0.1.7 uswds tailwind react
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.
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.