Tailwind Handbook – Part I

What?

Tailwind CSS is a CSS framework.
It takes a utility-first approach to styling web pages and apps. The main difference from CSS frameworks such as Bootstrap is the absence of pre-styled components (buttons, navigation bars, etc.). Instead, Tailwind offers a collection of low-level utility classes, combination of which allows developers to apply styles directly in HTML.

Why?

Let’s highlight some of the benefits of using Tailwind CSS.

1. Speed of development. Thanks to utility-first approach of Tailwind and its provided classes, the layouts could be prototyped and built quickly right in HTML file.
2. Reducing working with huge CSS files. No more huge stylesheets to deal with.
3. Customization. Configuration file provides full control over the framework to adjust it to a project’s specific needs.
   ## Installation and Setup

Tailwind could be installed via npm and requires tailwind.config.js to be created.
The process is best described on Get started with Tailwind CSS page.

Core Concepts

There are two concepts to keep in mind while working with Tailwind:

• Utility classes
• Breakpoint prefixes

Let’s check out each.

Utility classes

The main concept of Tailwind. Utility class is nothing more than a wrapper for some CSS class. In VSCode with IntelliSense plugin for Tailwind you can hover the mouse over the utility class to see the underlying CSS code.

Breakpoint prefixes

Tailwind makes building responsive interfaces using breakpoint prefixes:

• sm: (640px and up)
• md: (768px and up)
• lg: (1024px and up)
• xl: (1280px and up)
• 2xl: (1536px and up)

An example:

<div class="bg-gray-200 md:bg-blue-500 p-4"> </div>

Customization

Tailwind allows to customize UI themes and values, as well as creating new component classes and utilities, to step aside from already existing classes and fine-tune the UI when needed.

More details could be found on Adding Custom Styles page.

Wrapping up

That’s it for the first part of the Tailwind handbook. By now, you should have a solid understanding of Tailwind CSS is and why it’s become a popular choice for web styling:

• Tailwind’s Paradigm: We explored Tailwind’s utility-first approach and how it differs from traditional CSS methodologies.
• Tailwind’s Building Blocks: You got introduced to the core of Tailwind—utility classes for spacing, colors, typography, responsive design, and more.

Already with this knowledge, you can start using Tailwind CSS. In the upcoming parts of the handbook, we’ll dive deeper into practical examples, customization techniques, and how to build real-world components.