Utilities allow the flexibility to change specific properties of every Pattern in certain views. For example, if a Pattern is set to
display: block in one view but in another it needs to be set to
display: inline, one solution would be to create another type of the Pattern. However, a UI developer may need to repeat this process for other Patterns.
A Utility class, such as Tailwind’s
.inline display utility, allows the developer to reuse this attribute without creating a different pattern type. This use case can be extended to every possible CSS attribute, such as color, position, font-families, margin, padding, etc. In addition, they can be bundled within media queries so certain utilities can work for specific screen sizes.
ACCESS NYC Patterns integrates the Tailwind Utility Framework, a library processed by PostCSS that allows custom configuration so that we can include specific utility modules, breakpoints, colors, etc. To get started using the Patterns utilities look at the Tailwind documentation along with the configuration file of this library. By default, not all properties are enabled so it’s important to be familiar with the Pattern's configuration.
Documentation for some of the most critical and customized Utilities exist here, but developers should refer to the Tailwind Documentation for further details.