Tailwind Guide

Tailwind helps us out by providing configurable utility classes, so we don't have to carry them from project to project, or maintain them.

What does it look like?

Add tailwind classes to a twig template to apply styles

Example in twig:

<ul>
  <li class="h4 mb-2xs">Text transform</li>
  <li class="capitalize">.capitalize</li>
  <li class="lowercase">.LOWERCASE</li>
  <li class="uppercase">.uppercase</li>
</ul>

Example in CSS: Use @apply followed by the class name. To use media queries with tailwind classes, preface it with the media query size and a colon md:.

.p-card {
  @apply p-sm md:px-md md:py-lg;
}

Use /style-guide as a reference

The style guide page was created almost entirely with tailwind and primitive classes. Use it to find common utilities, or to see how they work in action.

Explore Tailwind docs

Editor Integrations

• VSCode