Tailwind CSS is a utility-first, highly customizable, low-level CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed. This makes it easier for the developer to test out new styles and change the layout.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/avatar.svg" alt="Avatar" />
</div>
<div>
<div class="text-xl font-medium text-black">Full Name</div>
<p class="text-slate-500">short bio</p>
</div>
</div>Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.
You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.
Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.
Tailwind’s breakpoints only include a min-width and don’t include a max-width, which means any utilities you add at a smaller breakpoint will also be applied at larger breakpoints.
If you’d like to apply a utility at one breakpoint only, the solution is to undo that utility at larger sizes by adding another utility that counteracts it.
Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.
Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.
By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually.
If you’re repeating the same utilities over and over and over again, all you have to do is extract them into a component or template partial and boom — you’ve got a single source of truth so you can make changes in one place.
If you need to reuse some styles across multiple files, the best strategy is to create a component if you’re using a front-end framework like React, Svelte, or Vue, or a template partial if you’re using a template language like Blade, ERB, Twig, or Nunjucks.
Components and template partials solve duplication problem much better than CSS-only abstractions because a component can encapsulate the HTML and the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too.