tailwindcss

The ACCESS NYC Patterns integrate tailwindcss, a CSS utility-first framework processed by PostCSS that supports custom configuration. Below is a table describing the current configuration.

tailwindcss

A simple example for using a utility to add padding to an element would be to use the utility .p-1. This will add 8px of padding on all sides of an element.

.p-1 {
  padding: 8px
}

<div class="p-1"></div>

Configuration

There are three parts to the tailwindcss configuration.

  • Theme: This object contains customizations for particular utilities such as font families, colors, margin, padding, etc. Source documentation.
  • Variants: This object contains variants that represent different states that the utilities appear in such as media queries, :hover, and :focus states. Source documentation.
  • Core Plugins: This array is a white list of utility plugins that defines what sets of utilities will be compiled in the final stylesheet distribution. Source documentation.

Theme

Example; the padding plugin is customized to use 8px as the basis for all padding increments. .p-2 would add 8px × 2 = 16px padding on all sides of an element.

<div class="p-2"></div>

Colors are part of the theme configuration but are described in more detail in the Color Utility documentation.

Variants

Example; to have padding only appear for desktop screens within NYCO Patterns the prefix screen-desktop: is added to the .p-1 utility.

<div class="screen-desktop:p-1"></div>

The plugin table below describes the available variants for each utility. An empty array [] means only the default state is available. The screens theme configuration describes the avaliable break points for the responsive variants.

Core Plugins

Example; the core plugin for padding is padding. Adding or removing it to the array will determine wether those utilities are compiled to the global stylesheet.

ACCESS NYC × tailwindcss configuration

Theme

Plugin (link to docs)
colors
background color
border color
border width
Default
inset
box shadow
fill
font family
font size
font weight
height
line height
margin
max width
padding
screens
text color

Variants and Core Plugins

Plugin (link to docs)
Variants
Configuration
accessibility
[responsive]
Default
background color
[responsive]
border collapse
[]
Default
border color
[responsive]
border radius
[]
Default
border style
[]
Default
border width
[responsive]
Default
cursor
[]
Default
display
[responsive]
Default
flex direction
[responsive]
Default
flex wrap
[responsive]
Default
align items
[responsive]
Default
align self
[responsive]
Default
justify content
[responsive]
Default
align content
[responsive]
Default
flex
[responsive]
Default
flex grow
[responsive]
Default
flex shrink
[responsive]
Default
order
[responsive]
Default
list style type
[]
Default
margin
[responsive]
max height
[]
Default
max width
[responsive]
min height
[responsive]
Default
min width
[]
Default
opacity
[]
Default
overflow
[responsive]
Default
padding
[responsive]
pointer events
[]
Default
position
[]
Default
box shadow
[responsive, hover,focus]
stroke
[]
Default
table layout
[]
Default
text align
[]
Default
font size
[responsive]
font style
[responsive]
Default
text transform
[]
Default
text decoration
[]
Default
font smoothing
[]
Default
user select
[]
Default
vertical align
[]
Default
visibility
[]
Default
whitespace
[]
Default
width
[responsive]
Default
z index
[]
Default

Installation

tailwindcss is not imported the same way as other patterns. All utilities are compiled to a Sass file which can be imported in a Sass project…

@import 'node_modules/@nycopportunity/access-patterns/dist/styles/_tailwindcss.scss';

Or a a CSS file in the /dist folder which can be included through a CDN.

<link href="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.15.13/dist/styles/tailwindcss.css" rel="stylesheet" type="text/css">