Tailwind CSS is a utility-first CSS framework that has rapidly gained popularity among frontend developers over the past few years. In the traditional approach, we create a separate CSS file, invent class names, write selectors, and then attach them to our HTML elements. Tailwind completely changes this workflow: it gives you a large set of ready-made, small helper classes, and you style your elements directly in the HTML markup using those classes. As a result, you build your design right where you can see it, without constantly jumping between files or keeping the structure of your stylesheet in your head.
What utility-first actually means
The essence of the utility-first philosophy is that each class is responsible for just one or a few specific CSS properties. For example, the p-4 class adds inner padding to an element, text-center aligns text to the center, and flex turns an element into a flexbox container. You combine these tiny building blocks directly in your HTML and assemble complex interfaces from them. This is fundamentally different from component-based libraries like Bootstrap, which hand you finished "card", "navbar", or "button" components. Tailwind instead provides atomic tools so that you can build those components exactly the way you want, without fighting against someone else's predefined styles.
The example below clearly shows the difference between traditional CSS and Tailwind. In the classic approach we invent a class name and describe it in a separate file, whereas in Tailwind everything lives in one place, right in the markup:
<!-- Traditional CSS approach -->
<button class="btn-primary">Submit</button>
/* separately in style.css */
.btn-primary {
padding: 0.5rem 1rem;
background-color: #2563eb;
color: white;
border-radius: 0.375rem;
}
<!-- Tailwind approach -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-md">
Submit
</button>The most commonly used core classes
To start working with Tailwind, you only need to know a few basic groups of classes. For layout there are flex, grid, and block; for spacing there are p-* (padding) and m-* (margin); and for sizing you use w-* and h-*. When working with text, classes like text-lg, font-bold, and text-gray-700 come in handy, while bg-* classes handle background colors. Crucially, all of these classes are built on a consistent scaling system: p-1 gives a small amount of space while p-8 gives noticeably more, so your design always stays proportional and visually coherent.
<div class="flex items-center justify-between p-6 bg-white rounded-lg shadow">
<h3 class="text-xl font-bold text-gray-800">Product name</h3>
<span class="text-green-600 font-semibold">$12.00</span>
</div>Responsive design and states
One of Tailwind's greatest strengths is its responsive design system and its state modifiers. To change a style depending on the screen size, you add a prefix such as md: or lg: before the class. For instance, flex-col md:flex-row means that on small screens the elements stack into a column, while on medium and large screens they line up in a row. In the same way, the hover: prefix lets you change a style when the user moves the cursor over an element. Because this approach is based on the mobile-first principle, you first describe the appearance for small screens and then progressively enhance it for larger ones.
<div class="flex flex-col md:flex-row gap-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded
transition focus:ring-2 focus:ring-blue-400">
Save
</button>
</div>Configuration, JIT, and why it works fast
Tailwind is configured in your project through the tailwind.config.js file, and this is exactly where you add your own colors, fonts, and scale values, tailoring the framework to your brand. The JIT (Just-In-Time) compiler in modern versions includes only the classes you actually used in the final CSS, which keeps the output file very small and lets the site load quickly. The high development speed comes from the absence of context switching: you don't jump between HTML, a CSS file, and the browser, but instead do all the work in one place, right in the markup, which keeps you focused and speeds things up.
Criticism and extracting components
The most common criticism of Tailwind is that the HTML markup becomes crowded with a large number of classes and harder to read. A single button or card can accumulate dozens of classes, and at first this genuinely looks unusual. However, the solution is simple: you extract repeating elements into separate components using React, Vue, or Blade, so the classes are written once and reused many times. This way you keep the speed of Tailwind while your code stays clean and maintainable. If you plan to build a website or an online store, these modern frontend approaches combined with sayt.uz services can help you achieve a fast, high-quality result.