Styling with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that we're using for styling in Velocity. Tailwind enables us to build custom designs with small, reusable utility classes.

Unlike traditional CSS methodologies like BEM or SMACSS, Tailwind encourages a utility-first workflow. This means that instead of creating discrete, named classes for components, Tailwind encourages you to compose complex designs out of small, reusable utility classes.

Basic Usage

Here's a simple example of how you can use Tailwind CSS in a JSX component:

const HelloWorld = () => <p class="text-xl text-blue-500">Hello, world!</p>;

In this example, we're rendering a paragraph with text that is blue (text-blue-500) and has a font size of extra large (text-xl).

Further Reading

For a comprehensive overview of Tailwind CSS and its capabilities, you can refer to the official Tailwind CSS documentation. It provides a complete guide on how to use and customize Tailwind, including its utility classes, responsive design features, state variants, and more.

If you need to deepen your understanding of the utility-first workflow, the In Defense of Utility-First CSS article provides an in-depth defense of utility-first CSS, its benefits and trade-offs.