Skip to content
Amor Kumar edited this page Oct 6, 2022 · 4 revisions

wd_s integrates Tailwind to help handle sensible, consistent styles without a lot of overhead for engineers.

In order to stay consistent with the theme setup out of the box, we recommend adding Tailwind styles via @apply rules in Sass partials rather than adding Tailwind utility classes to HTML markup.

Either way is a great way to use Tailwind! For our purposes, though, we wanted to settle on one path to reduce overhead when new engineers begin working on a project. Staying in Sass partials consistently, our engineers will know that they don't need to track down a template file or template tag to tweak the styles of a particular element.

If you're interested in learning more about Tailwind, checkout the Tailwind docs which are robust and filled to the brim with details and examples to help you get started.

tailwind.config.js

The Tailwind config file in the theme allows us to create and extend global styles, add utility classes, add components, and much more.

Our tailwind config customizations live in wds.preset.js so that they can be reused across multiple projects. To learn more about tailwind presets, please refer to Tailwind's documentation.