{"id":16736747,"url":"https://github.com/hursey013/tailwindcss-uswds","last_synced_at":"2025-03-21T21:32:08.968Z","repository":{"id":40714858,"uuid":"268628017","full_name":"hursey013/tailwindcss-uswds","owner":"hursey013","description":"U.S. Tailwind Design System","archived":false,"fork":false,"pushed_at":"2022-12-30T20:45:01.000Z","size":313,"stargazers_count":29,"open_issues_count":13,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-14T00:23:24.022Z","etag":null,"topics":["tailwind-utilities","tailwindcss","tailwindcss-plugin","uswds"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hursey013.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-01T20:42:44.000Z","updated_at":"2024-10-09T20:37:45.000Z","dependencies_parsed_at":"2023-01-31T16:16:19.867Z","dependency_job_id":null,"html_url":"https://github.com/hursey013/tailwindcss-uswds","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hursey013%2Ftailwindcss-uswds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hursey013%2Ftailwindcss-uswds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hursey013%2Ftailwindcss-uswds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hursey013%2Ftailwindcss-uswds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hursey013","download_url":"https://codeload.github.com/hursey013/tailwindcss-uswds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820158,"owners_count":16886111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwind-utilities","tailwindcss","tailwindcss-plugin","uswds"],"created_at":"2024-10-13T00:23:26.213Z","updated_at":"2024-10-28T11:05:43.675Z","avatar_url":"https://github.com/hursey013.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# U.S. Tailwind Design System\n\nA [TailwindCSS](https://tailwindcss.com/) plugin for adding [U.S. Web Design System](https://designsystem.digital.gov/) design tokens to supported Tailwind utilities. For use in utility-first projects that favor a JavaScript based configuration and do not require USWDS provided components or page templates out of the box.\n\n## Install\n\n1. Install the plugin:\n\n```\n# Using npm\nnpm install @hursey013/tailwindcss-uswds --save-dev\n\n# Using Yarn\nyarn add @hursey013/tailwindcss-uswds -D\n```\n\n2. Add it to your tailwind.config.js file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  plugins: [require(\"@hursey013/tailwindcss-uswds\")]\n};\n```\n\n## Options\n\n### `fontPath` (optional)\n\n`tailwindcss-uswds` provides the necessary font files in order to generate the required USWDS `@font-face` rules. If you would prefer to copy the font files directly into your project folder you can update the path to the font directory:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require(\"@hursey013/tailwindcss-uswds\")({\n      fontPath: \"../path/to/fonts\"\n    })\n  ]\n};\n```\n\n### `overrides` (optional)\n\nBy default, all supported utilities use the `standard` set of design tokens provided by USWDS:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require(\"@hursey013/tailwindcss-uswds\")({\n      // ...\n      overrides: {\n        borderRadius: \"standard\",\n        borderWidth: \"standard\",\n        boxShadow: \"standard\",\n        colors: \"standard\",\n        cursor: \"standard\",\n        flex: \"standard\",\n        fontFamily: \"standard\",\n        fontFeatureSettings: \"standard\",\n        fontSize: \"standard\",\n        fontWeight: \"standard\",\n        gap: \"standard\",\n        height: \"standard\",\n        letterSpacing: \"standard\",\n        lineHeight: \"standard\",\n        margin: \"standard\",\n        maxHeight: \"standard\",\n        maxWidth: \"standard\",\n        measure: \"standard\",\n        minHeight: \"standard\",\n        minWidth: \"standard\",\n        opacity: \"standard\",\n        order: \"standard\",\n        padding: \"standard\",\n        screens: \"standard\",\n        textIndent: \"standard\",\n        width: \"standard\",\n        zIndex: \"standard\"\n      }\n    })\n  ]\n};\n```\n\nTo prevent USWDS design tokens from overriding the default Tailwind values, pass a value of `false`:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require(\"@hursey013/tailwindcss-uswds\")({\n      // ...\n      overrides: {\n        // ..\n        flex: false\n        // ...\n      }\n    })\n  ]\n};\n```\n\nTo use an extended set of USWDS design tokens for a particular utility, pass a value of `extended` :\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require(\"@hursey013/tailwindcss-uswds\")({\n      // ...\n      overrides: {\n        // ..\n        color: \"extended\"\n        // ...\n      }\n    })\n  ]\n};\n```\n\nCurrently `color`, `borderRadius`, `fontSize`, `fontWeight`, `letterSpacing`, and `lineHeight` support `extended`.\n\n## Usage\n\n### Utilities\n\nGenerated utility classes follow the default naming conventions provided by Tailwind with USWDS design tokens as values. This creates shorter class names and may also change the utility classname itself:\n\n```css\n/* .border-bottom-1 becomes: */\n.border-b-1 {\n  border-bottom: 0.75rem solid;\n}\n\n/* .margin-bottom-neg-2px becomes: */\n.-mb-2px {\n  margin-bottom: -2px;\n}\n\n/* .radius-right-lg becomes: */\n.rounded-r-lg {\n  border-top-right-radius: 0.5rem;\n  border-bottom-right-radius: 0.5rem;\n}\n```\n\nOut of the box, `tailwindcss-uswds` provides the following USWDS design tokens to each specific utility:\n\n| Key                 | Classes                                                                                                                                                      | Reference                                                                                                                                                 |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`borderRadius`**  | `.rounded-{t\\|r\\|b\\|l\\|tl\\|tr\\|br\\|bl}-{0, sm, md, lg, pill}`                                                                                                | [TW](https://tailwindcss.com/docs/border-radius)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/border/#utility-radius)                  |\n| **`borderWidth`**   | `.border-{t\\|r\\|b\\|l}-{0, 1px, 2px, 05, 1, 105, 2, 205, 3}`                                                                                                  | [TW](https://tailwindcss.com/docs/border-width)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/border/#utility-border-width)             |\n| **`boxShadow`**     | `.shadow-{none, 1, 2, 3, 4, 5}`                                                                                                                              | [TW](https://tailwindcss.com/docs/box-shadow)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/shadow/)                                    |\n| **`colors`**        | See [colors](#colors) section                                                                                                                                |\n| **`cursor`**        | `.cursor-{auto, default, move, not-allowed, pointer, wait}`                                                                                                  | [TW](https://tailwindcss.com/docs/cursor)                                                                                                                 |\n| **`flex`**          | `.flex-{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto, fill}`                                                                                                  | [TW](https://tailwindcss.com/docs/flex)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/flex/#utility-flex)                               |\n| **`fontFamily`**    | `.font-{alt, body, code, heading, mono, sans, serif, ui}`                                                                                                    | [TW](https://tailwindcss.com/docs/font-family)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/font-size-and-family/#utility-font-family) |\n| **`fontSize`**      | `.text-{alt, body, code, heading, mono, sans, serif, ui}-{3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl}`                                                           | [TW](https://tailwindcss.com/docs/font-size)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/font-size-and-family/#utility-font)          |\n| **`fontWeight`**    | `.font-{light, normal, bold}`                                                                                                                                | [TW](https://tailwindcss.com/docs/font-weight)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/text-styles/#font-weight)                  |\n| **`gap`**           | `.gap-{0, 2px, 05, 1, 2, 3, 4, 5, 6, sm, md, lg}`                                                                                                            | [TW](https://tailwindcss.com/docs/gap)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/layout-grid/#gutters)                              |\n| **`height`**        | `.h-{auto, 0, 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, card, card-lg, mobile, full, viewport}`                                             | [TW](https://tailwindcss.com/docs/height)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#height)                       |\n| **`letterSpacing`** | `.tracking-{-3, -2, -1, auto, 1, 2, 3}`                                                                                                                      | [TW](https://tailwindcss.com/docs/letter-spacing)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/text-styles/#letterspacing)             |\n| **`lineHeight`**    | `.leading-{alt, body, code, heading, mono, sans, serif, ui}-{1, 2, 3, 4, 5, 6}`                                                                              | [TW](https://tailwindcss.com/docs/line-height)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/paragraph-styles/#line-height)             |\n| **`margin`**        | `.m{t\\|r\\|b\\|l\\|x\\|y}-{-1px, -2px, -05, -1, -105, -2, -205, -3, 0, 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, auto, card, card-lg, mobile}`  | [TW](https://tailwindcss.com/docs/margin)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/margin-and-padding/#margin)                     |\n| **`maxHeight`**     | `.max-h-{none, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, card, card-lg, mobile, mobile-lg, tablet, tablet-lg, viewport}`                              | [TW](https://tailwindcss.com/docs/max-height)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#maxh)                     |\n| **`maxWidth`**      | `.max-w-{none, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, card, card-lg, mobile, mobile-lg, tablet, tablet-lg, desktop, desktop-lg, widescreen, full}` | [TW](https://tailwindcss.com/docs/max-width)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#maxw)                      |\n| **`minHeight`**     | `.min-h-{none, 0, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, card, card-lg, mobile, mobile-lg, tablet, tablet-lg, viewport}`                           | [TW](https://tailwindcss.com/docs/min-height)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#minh)                     |\n| **`minWidth`**      | `.min-w-{none, 0, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15}`                                                                                          | [TW](https://tailwindcss.com/docs/min-width)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#minw)                      |\n| **`opacity`**       | `.opacity-{0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100}`                                                                                                      | [TW](https://tailwindcss.com/docs/border-radius)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/display/#opacity)                        |\n| **`order`**         | `.order-{first, last, initial, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}`                                                                                        | [TW](https://tailwindcss.com/docs/opacity)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/flex/#utility-order)                           |\n| **`padding`**       | `.p{t\\|r\\|b\\|l\\|x\\|y}-{0, 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15}`                                                                        | [TW](https://tailwindcss.com/docs/padding)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/margin-and-padding/#padding)                   |\n| **`screens`**       | See [breakpoints](#breakpoints) section                                                                                                                      |\n| **`width`**         | `.w-{auto, 0, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, card, card-lg, mobile, mobile-lg, tablet, tablet-lg, desktop, desktop-lg, widescreen, full}`  | [TW](https://tailwindcss.com/docs/width)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/height-and-width/#width)                         |\n| **`zIndex`**        | `.z-{auto, bottom, top, 0, 100, 200, 300, 400, 500}`                                                                                                         | [TW](https://tailwindcss.com/docs/z-index)\u0026nbsp;\\|\u0026nbsp;[USWDS](https://designsystem.digital.gov/utilities/display/#z-index)                              |\n\nUnless mentioned above, all other utilities provided by Tailwind will be available with their default Tailwind values.\n\nDo note that some Tailwind utilities inherit values defined elsewhere in the config file. For example, the USWDS design tokens defined in `opacity` will also be provided to Tailwind's `borderOpacity`, `backgroundOpacity`, `placeholderOpacity`, and `textOpacity` utilities. Similar functionality is provided for `color` based utilities.\n\n### Additional utilities\n\nSeveral USWDS-specific utilities are available in addition to the defaults provided by Tailwind:\n\n| Key                       | Classes                                                                                                                                 | Reference                                                                              |\n| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| **`measure`**             | `.measure-{none, 1, 2, 3, 4, 5, 6}`                                                                                                     | [USWDS](https://designsystem.digital.gov/utilities/paragraph-styles/#max-width)        |\n| **`fontFeatureSettings`** | `.text-{tabular, no-tabular, }`                                                                                                         | [USWDS](https://designsystem.digital.gov/utilities/text-styles/#font-feature-settings) |\n| **`textIndent`**          | `.text-indent-{-9, -8, -7, -6, -5, -4, -3, -205, -2, -105, -1, -05, -2px, -1px, 0, 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9 }` | [USWDS](https://designsystem.digital.gov/utilities/paragraph-styles/#text-indent)      |\n\n### Colors\n\nBy default, `tailwindcss-uswds` provides [theme](https://designsystem.digital.gov/design-tokens/color/theme-tokens/), [state](https://designsystem.digital.gov/design-tokens/color/state-tokens/), and basic color tokens to all color based Tailwind utilities (`.bg-{color}`, `.border-{color}`, and `.text-{color}`). By using the value of `extended` as outlined in the [overrides](#overrides-optional) section, [system](https://designsystem.digital.gov/design-tokens/color/system-tokens/) tokens can be included as well. Do note that including system color tokens will add hundreds of additional colors (and thousands of Tailwind generated utilities), so be sure to use the [purge](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) option provided by Tailwind to remove unused CSS.\n\n#### Default color tokens\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n    colors: {\n      transparent: \"rgba(0, 0, 0, 0)\",\n      black: \"rgb(0, 0, 0)\", // #000000\n      white: \"rgb(255, 255, 255)\", // #ffffff\n\n      // Theme color tokens\n      base: {\n        lightest: \"rgb(240, 240, 240)\", // #f0f0f0\n        lighter: \"rgb(223, 225, 226)\", // #dfe1e2\n        light: \"rgb(169, 174, 177)\", // #a9aeb1\n        default: \"rgb(113, 118, 122)\", // #71767a\n        dark: \"rgb(86, 92, 101)\", // #565c65\n        darker: \"rgb(61, 69, 81)\", // #3d4551\n        darkest: \"rgb(27, 27, 27)\" // #1b1b1b\n      },\n      ink: \"rgb(27, 27, 27)\", // #1b1b1b\n\n      primary: {\n        lighter: \"rgb(217, 232, 246)\", // #d9e8f6\n        light: \"rgb(115, 179, 231)\", // #73b3e7\n        default: \"rgb(0, 94, 162)\", // #005ea2\n        vivid: \"rgb(0, 80, 216)\", // #0050d8\n        dark: \"rgb(26, 68, 128)\", // #1a4480\n        darker: \"rgb(22, 46, 81)\" // #162e51\n      },\n      secondary: {\n        lighter: \"rgb(243, 225, 228)\", // #f8dfe2\n        light: \"rgb(242, 147, 140)\", // #f2938c\n        default: \"rgb(216, 57, 51)\", // #d83933\n        vivid: \"rgb(228, 29, 61)\", // #e41d3d\n        dark: \"rgb(181, 9, 9)\", // #b50909\n        darker: \"rgb(139, 10, 3)\" // #8b0a03\n      },\n      \"accent-cool\": {\n        darker: \"rgb(7, 100, 141)\", // #e1f3f8\n        dark: \"rgb(40, 160, 203)\", // #97d4ea\n        default: \"rgb(0, 189, 227)\", // #00bde3\n        light: \"rgb(151, 212, 234)\", // #28a0cb\n        lighter: \"rgb(225, 243, 248)\" // #07648d\n      },\n      \"accent-warm\": {\n        lighter: \"rgb(242, 228, 212)\", // #f2e4d4\n        light: \"rgb(255, 188, 120)\", // #ffbc78\n        default: \"rgb(250, 148, 65)\", // #fa9441\n        dark: \"rgb(192, 86, 0)\", // #c05600\n        darker: \"rgb(119, 85, 64)\", // #775540\n      },\n\n      // State color tokens\n      info: {\n        lighter: \"rgb(231, 246, 248)\", // #e7f6f8\n        light: \"rgb(153, 222, 234)\", // #99deea\n        default: \"rgb(0, 189, 227)\", // #00bde3\n        dark: \"rgb(0, 158, 193)\", // #009ec1\n        darker: \"rgb(46, 98, 118)\" // #2e6276\n      },\n      error: {\n        lighter: \"rgb(244, 227, 219)\", // #f4e3db\n        light: \"rgb(243, 146, 104)\", // #f39268\n        default: \"rgb(213, 67, 9)\", // #d54309\n        dark: \"rgb(181, 9, 9)\", // #b50909\n        darker: \"rgb(111, 51, 49)\" // #6f3331\n\n      },\n      warning: {\n        lighter: \"rgb(250, 243, 209)\", // #faf3d1\n        light: \"rgb(254, 230, 133)\", // #fee685\n        default: \"rgb(255, 190, 46)\", // #ffbe2e\n        dark: \"rgb(229, 160, 0)\", // #e5a000\n        darker: \"rgb(147, 111, 56)\" // #936f38\n      },\n      success: {\n        lighter: \"rgb(236, 243, 236)\", // #ecf3ec\n        light: \"rgb(112, 225, 123)\", // #70e17b\n        default: \"rgb(0, 169, 28)\", // #00a91c\n        dark: \"rgb(77, 128, 85)\", // #4d8055\n        darker: \"rgb(68, 100, 67)\" // #446443\n      },\n      disabled: {\n        light: \"rgb(230, 230, 230)\", // #e6e6e6\n        default: \"rgb(201, 201, 201)\", // #c9c9c9\n        dark: \"rgb(173, 173, 173)\" // #adadad\n      },\n\n      // Basic color tokens\n      red: \"rgb(229, 34, 7)\", // #e52207\n      orange: \"rgb(230, 111, 14)\", // #e66f0e\n      gold: \"rgb(255, 190, 46)\", // #ffbe2e\n      yellow: \"rgb(254, 230, 133)\", // #fee685\n      green: \"rgb(83, 130, 0)\", // #538200\n      mint: \"rgb(4, 197, 133)\", // #04c585\n      cyan: \"rgb(0, 158, 193)\", // #009ec1\n      blue: \"rgb(0, 118, 214)\", // #0076d6\n      indigo: \"rgb(103, 108, 200)\", // #676cc8\n      violet: \"rgb(129, 104, 179)\", // #8168b3\n      magenta: \"rgb(215, 45, 121)\" // #d72d79\n    }\n    // ...\n  },\n  plugins: [require(\"@hursey013/tailwindcss-uswds\")]\n};\n```\n\n#### Customizing colors\n\nThe USWDS based theme can be customized by using your project's `tailwind.config.js` file and following the process outlined in the [customizing colors](https://tailwindcss.com/docs/customizing-colors/) docs.\n\nTo reference [system](https://designsystem.digital.gov/design-tokens/color/system-tokens/) color tokens directly by name (without needing to use the `extended` option) you can import the JSON file generated by `tailwindcss-uswds`:\n\n```js\n// tailwind.config.js\nconst colors = require(\"@hursey013/tailwindcss-uswds/dist/colors\");\n\nmodule.exports = {\n  theme: {\n    // ...\n    extend: {\n      colors: {\n        // ...\n        primary: {\n          ...colors.primary,\n          vivid: colors[\"blue-warm\"].50v\n        }\n        // ...\n      }\n    }\n  },\n  plugins: [require(\"@hursey013/tailwindcss-uswds\")]\n};\n```\n\n### Breakpoints\n\nThe default breakpoints provided by USWDS are as follows:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n    screens: {\n      card: \"10rem\",\n      \"card-lg\": \"15rem\",\n      desktop: \"64rem\",\n      \"desktop-lg\": \"75rem\",\n      mobile: \"20rem\",\n      \"mobile-lg\": \"30rem\",\n      tablet: \"40rem\",\n      \"tablet-lg\": \"55rem\",\n      widescreen: \"87.5rem\"\n    }\n    // ...\n  },\n  plugins: [require(\"@hursey013/tailwindcss-uswds\")]\n};\n```\n\nThese breakpoints can be used with most utility classes by adding the corresponding prefix:\n\n```html\n\u003cimg class=\"w-5 tablet:w-10 widescreen:w-15\" src=\"...\" /\u003e\n\n// ...\n```\n\n### Icons\n\nAs an added convenience, all icons provided by USWDS are included in `tailwindcss-uswds`.\n\n```js\nimport flag from \"@hursey013/tailwindcss-uswds/dist/img/us_flag_small.png\";\n\n// ...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhursey013%2Ftailwindcss-uswds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhursey013%2Ftailwindcss-uswds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhursey013%2Ftailwindcss-uswds/lists"}