Studio Terabyte is a full stack web development studio who finds and builds solutions that fit your project
What is Tailwind
Tailwind is a utility-first CSS framework which makes use of classes in order to build your design directly in your HTML. For example you can easily set the width, background color, box shadow and edges of the element by doing
<div class="w-96 bg-white shadow rounded">
This way of writing CSS as HTML classes helps sticking to the predefined constraints of your design system instead of maintaining different stylesheets with arbitrary values. This makes it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.
Tailwind also comes with no styling out of the box. This means that, unlike a framework such as Bootstrap, you have full control over what your project will look like without the need to override default styling.
What has changed?
A number of things have changed with this new release of Tailwind such as performance increases, more configuration freedom and a set of exciting new features.
Just-In-Time compiler
In order to improve build times, the team behind Tailwind have added a Just-In-Time compiler which allows for sub-second build times (even for larger projects), enables every variant to be out of the box without the need for manual configuration and lets you generate arbitrary styles without writing custom CSS like top-[-113px].
More colors
Another great benefit of the new JIT compiler is that more things can be added to Tailwind without drastically increasing the final build size. This means that the entire extended color pallet is now availble out of the box.
Scroll snap API
These days most of the traffic online comes from people on their mobile phones, which means that mobile first design is the norm and you should always strive to create a good UX. One way Tailwind can now help you do this is via the Scroll Snap API.
This new API lets you decide where an image should "snap" when a user scrolls it horizontally. In practice it looks something like:
<div class="snap-x ...">
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
</div>
See here for a full working example.
Modern aspect ratio API
The Aspect Ratio API is a relativly new CSS property which is gaining more and more browser support. It allows you to set the aspect ratio of an element so that when either the width or the height is changed to match your design, the aspect ratio remains the same and the element does not look stretched or warped.
In Tailwind 3 you can this like so:
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>
Other features
Besides the listed features, the updated offers more exciting things like:
- Colored box shadows
- Multi-column layout
- Native form control styling
- Print modifier
- Modern aspect ratio API
- Fancy underline styles
- RTL and LTR modifiers
- Portrait and landscape modifiers
- Arbitrary properties
Should you update?
Yes. The new version is faster, has more features and has only a few breaking changes that you need to keep in mind when upgrading. The offical upgrade guide is a great place to start.
Also, if you are using a framework such as Nuxt (like this website) the official plugin might not yet have been updated to support Tailwind 3. If this is the case, you might want to consider ditching the plugin and going the direct integration route. For Nuxt you can check this guide and for other frameworks such as Next.js you can check here.