Basic Concepts of Tailwind CSS

To use Tailwind CSS efficiently, it's crucial to understand several core concepts behind it. This chapter will introduce the basics like utility-first, responsive design, and state variants.

Utility-First

This is the cornerstone of Tailwind. Every class name directly maps to one or more CSS properties. For example:

• text-lg -> font-size: 1.125rem;
• bg-blue-500 -> background-color: #3b82f6;
• flex -> display: flex;
• rounded-full -> border-radius: 9999px;

By combining these atomic classes, you can build any complex interface. The advantage of this approach is that you can complete all styling work in one place (HTML) without switching between multiple files.

Responsive Design

Tailwind adopts a mobile-first strategy. This means that utility classes without any prefix (like uppercase) apply to all screen sizes, while classes with prefixes (like md:uppercase) only apply at the specified breakpoint and above.

Tailwind includes several default breakpoints:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Example:

<img class="w-16 md:w-32 lg:w-48" src="...">

This code means:

• By default (below the sm breakpoint), the image width is w-16 (4rem).
• Starting from medium screen size (md, 768px and up), the width changes to w-32 (8rem).
• Starting from large screen size (lg, 1024px and up), the width changes to w-48 (12rem).

State Variants

Tailwind allows you to use state prefixes to apply different utility classes for different states (like hover, focus, active).

Example:

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save Changes
</button>

This button has a background color of bg-sky-500 by default, and when the mouse hovers over it (hover), the background color changes to bg-sky-700.

Common state variants include:

• Pseudo-classes: hover, focus, active, disabled, visited, first, last, odd, even, etc.
• Pseudo-elements: before, after, placeholder, file, etc.
• Media queries: dark (for dark mode), print, etc.

JIT Engine (Just-in-Time)

Starting with Tailwind CSS v3, the JIT (Just-in-Time) engine became the default. This means Tailwind will scan all your HTML, JavaScript, and template files during your project build, then generate only the CSS classes you actually use.

This brings several huge benefits:

• Extremely fast compilation: Regardless of how many utility classes you use, compilation time remains in milliseconds.
• All variants available out of the box: You no longer need to manually enable variants like hover, focus in your configuration file.
• Arbitrary value support: You can use square bracket syntax to create temporary, arbitrary-value utility classes, such as top-[117px] or w-[50%].

Understanding these core concepts will allow you to start using Tailwind CSS to build beautiful, responsive interfaces.