Tailwind CSS is an open-source utility-first CSS framework designed to help developers build modern websites quickly and efficiently. Unlike traditional CSS frameworks like Bootstrap, Tailwind CSS does not come with predefined components. Instead, it provides a set of utility classes that you can use to style your HTML elements directly.
1. Why should we use Tailwind CSS?
Tailwind CSS offers several advantages that make it a compelling choice for web development:
1.1 Rapid Development - With utility-first classes, you can quickly prototype and build your UI without writing custom CSS
Traditionally, whenever you need to style something on the web, you write CSS. But Tailwind CSS’s approach is utility-first, you style elements by applying pre-existing classes directly in your HTML. With this way, you’ll quickly notice some really important benefits:
- 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.
Traditional approach and utility-first approach
In a way, the above approach is just inline styles. But using utility classes has a few important advantages over inline styles:
- Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
- Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
- Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.
1.2 Responsive Design - Built-in responsive utilities simplify creating layouts that adapt to different screen sizes
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.
Tailwind provides five breakpoints by default, inspired by common device resolutions. They work for every utility class in the framework, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.
Tailwind responsive breakpoints
By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap. What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above. For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.
Besides, Tailwind generates a corresponding max-* modifier for each breakpoint, so out of the box the following modifiers are available, they’re called breakpoint range. You can use them to apply a utility only when a specific breakpoint range is active, stack a responsive modifier like md with a max-* modifier to limit that style to a specific range.
Tailwind breakpoint range modifiers
1.3 Maintainability - Reduces the need for deeply nested styles and long CSS files, making your code easier to maintain
Maintainability is a big concern of using a utility-first approach when Tailwind is managing commonly repeated utility combinations. But it’s easily solved by extracting components and partials, and using editor and language features like multi-cursor editing and simple loops.
- Using editor and language features
Modern editors such as VS Code include the features you need for highly productive source code editing. They support multiple cursors for fast simultaneous edits. If the styles you need to reuse only need to be reused within a single file, multi-cursor editing is the simplest way to manage any duplication.
Or when elements are reused by rendering in a loop, the actual class list is only written once so there’s no actual duplication problem to solve, you just need to update code at one place.
- Extracting components and partials
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 templating language like Blade, ERB, Twig, or Nunjucks). And then you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place.
Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS.
1.4 Performance - PurgeCSS integration helps remove unused styles, resulting in smaller CSS files and faster loading times
With the motto “It’s tiny — never ship unused CSS again.”, Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be.
Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.
With CSS files this small, you don’t have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that’s downloaded once and cached until you redeploy your site. For the smallest possible production build, we recommend minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli.
2. What's New with Tailwind CSS?
While it’s highly recommended that you create proper template partials for more complex components, you can use @apply directive to extract repeated utility patterns to custom CSS classes when a template partial feels heavy-handed.
If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice. Do not start using @apply for everything, because you will basically just write CSS again and throw away all of the workflow and maintainability advantages Tailwind gives you.
3. Summary
Therefore, through some of my research on Tailwind CSS above, it also helps you to know what it is, how it is used, and some of its special features. Hopefully, through this post, you can use and apply them to the projects you are working on.
References:
- Tailwind UI
- Image by homiedev.com