Tailwind CSS Reference

Contents

• Tips
  • Avoid “Styling at a Distance”
  • Use the Prettier Plug-In
  • Avoid Dynamic Class Name Construction
• Working with Tailwind CSS
• Resources
  • References
  • Articles

Tips

Avoid “Styling at a Distance”

Write your Tailwind classes on the HTML (or component) that is being displayed. The further you are from the location of the applied style the harder it is to reason about how it is affected by intermediate logic.

Use the Prettier Plug-In

tailwindlabs/prettier-plugin-tailwindcss will sort your class names making development and code review much easier.

Avoid Dynamic Class Name Construction

A static class name string is unambiguous for Tailwind to parse and easier for users and tools to determine if there are conflicts.

If dynamic construction is necessary (e.g. due to combinatorial explosion: 6 boolean params results in 2⁶ or 64 variants) consider:

• using lukeed/clsx
  • configuring the tailwindlabs/prettier-plugin-tailwindcss to parse clsx function calls

Working with Tailwind CSS

• review Preflight for an explanation of the normalization styles they apply

Resources

References

• Documentation
  • Customizing Colors and the default color palette
• defaultConfig.stub.js, the basis of the default config object

Articles

• Adam Wathan’s original CSS Utility Classes and "Separation of Concerns" article introducing TailwindCSS and describing functional CSS
• About HTML semantics and front-end architecture
• Why I Don't Like Tailwind CSS which provides an alternate perspective and, as of February 2022, has started to warm to utility classes (inferred via author comment at bottom of article)
• Install Tailwind CSS with Create React App