CSS

What's new in Tailwind CSS 3?

Mark Shenouda
3 min read
What's new in Tailwind CSS 3?
This article was written over 18 months ago and may contain information that is out of date. Some content may still be relevant, but please refer to official documentation for the latest information.

Introduction

Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files.

Tailwind CSS v3

Tailwind CSS v3 was released at the end of 2021, and it has even more cool features.

Just-In-Time Engine

"Just-in-time", or @tailwindcss/jit, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB.

The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server.

Scroll Snap API

Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for:

  • Scroll behavior: we have to classes scroll-smooth and scroll-auto
  • Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-my-4
  • Scroll padding: exactly like scroll margin it’s scroll-{padding class}
  • Scroll snap align: it’s used to snap every element to a specific direction on scroll like span-start, snap-end and snap-center
  • Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are snap-always and snap-normal.
  • scroll snap type: it used to control how strictly snap points are enforced in a snap container like snap-none, snap-x, snap-y, snap-both etc

More Colors

The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors!

Colored Box Shadows

This is a cool feature you can use the shadow utility shadow-{color}. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity} like:

<div class=”shadow-xl shadow-rose-500/30”>
Some content
</div>

Print Modifier

It’s a new feature that allows you to control how the page will look when people print it like:

<div class="print:hidden">
   This will be hidden when you print the page!
</div>
<div class="hidden print:block">
    This will be hidden in the browser but will be visible when you print the page!
</div>

Colored Underline Styles

Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color} is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy} used to change the text underline’s style.

Multi-Column Layout

Tailwind CSS 3 supports colums. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer:

<footer class="columns-1 md:columns-4 ...">
  ...
</footer>

Modern Aspect Ratio API

Use the aspect-{ratio} utilities to set the desired aspect ratio of an element like aspect-auto, aspect-square, or aspect-video.

RTL and LTR Modifiers

Also, we have two new modifiers ltr and rtl to provider good user experience in multidirectional websites. You can use them, like:

<div class=”ltr:bg-red”>
…
</div>

<div class=”rtl:mr-8”>
…
</div>

Portrait and Landscape Modifiers

Also, we have new modifiers that give us more control over the page, like:

<div class=”portrait:hidden”>
Hello from landscape!
</div>

<div class=”landscape:hidden”>
Please rotate your device!
</div>

Wrap Up

Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!

About the author

Mark Shenouda

Mark Shenouda

Software Engineer

@MarkSShenouda@markshenouda

Keep reading

You might also like

View all posts →

The CSS / Utility hybrid approach with Tailwind v4

The post concludes with a look at modern CSS and interesting hybrid utility patterns with the Tailwind v4 release...

Dane Grant4 mins
Tailwind CSSCSS

Introducing the New SolidJS and Tailwind CSS Starter Kit

We are delighted to announce our SolidJS + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidJS and Tailwind CSS in no time. In this article, we will walk you through the kit, and how it is a great option for building your next project. This kit has been designed to build tiny and optimized web applications on both the JavaScript and CSS sides. It's very useful when the load time of your application's files is critical, like when the internet connection is slow or when you are building a mobile application for a targeted audience. Why SolidJS? SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you build web applications using a declarative API that you’re already familiar with. It’s a great alternative to React, Vue, and other popular JavaScript frameworks. It’s also a great choice for building static sites. The best feature of SolidJS is how tiny its build bundles are. It helps you ship less JavaScript to the browser. Why Tailwind CSS? Tailwind CSS is a utility first CSS framework for rapidly building custom user interfaces. It makes it easy to build complex UIs without having to write custom CSS. And the best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Starter Kit Features SolidJS A declarative, efficient, and flexible JavaScript library for building user interfaces. Tailwind CSS A utility first CSS framework for rapidly building custom user interfaces. Vite A build tool that aims to provide a faster and leaner development experience for modern web projects. Storybook An open source tool for developing UI components in isolation for React, Vue, and Angular. Vitest A fast and simple test runner for Vite. TypeScript A typed superset of JavaScript that compiles to plain JavaScript. Tailwind CSS Tailwind CSS makes it easy to build complex UIs without having to write custom CSS. The best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Also, Tailwind CSS is great at scale, so you can add as many utilities as you want. Storybook Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and others. It makes building stunning UIs organized and efficient. It also helps you build components faster, and reuse them in your projects. It also helps you document your components. This kit comes with Storybook pre configured. You can start using it right away. Why Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's a great alternative to Webpack. It's fast and easy to use. It also helps you ship less JavaScript to the browser. It's a great choice for building static sites. This kit comes with Vite pre configured. You can start using it right away. Testing This kit comes with Vitest pre configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. How to get started? Run npx @this dot/create starter to start a new project from one of the kits in the Starter CLI library. Select the SolidJS, Tailwind kit from the CLI library options Name your project cd into your project directory and install dependencies using the tool of your choice (npm, yarn or pnpm) Copy the contents of the .env.example file into a .env file When to use this kit? This kit is a great alternative to React and SCSS. It focuses on performance and developer experience by providing a fast and leaner development experience for modern web projects. It also helps you write less CSS, and less JavaScript. Options to scale the kit to fit your needs In this section, we will walk you through the options you have to scale the kit even further to fit your needs. We didn't want to add too many options to the kit in order to keep it simple and easy to use, but we also wanted to provide you with the ability to scale the kit. PWA PWA is a great way to make your app available offline, and installable on mobile devices. It caches your app's assets to make it load faster. It also helps you build a great user experience, and increase your app's engagement by providing push notifications. If you want to add PWA support to the kit, you can use the PWA Vite Plugin to add PWA support to the kit. It covers the PWA integrations for Vite, and the ecosystem with zero configuration and is framework agnostic. Conclusion So as we discussed in this article this SolidJS starter kit is a great way to start your new SolidJS project because it has most of the tools you need installed and preconfigured for you from Storybook to Testing, and even the PWA configurations. We hope you enjoyed this article, and we hope you will enjoy using the kit. If you have any questions or suggestions, please feel free to reach out to us on Twitter or Contact form....

Mark Shenouda4 mins
SolidJSTailwind CSS

Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev

Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits, and structure more complex projects. We are excited to announce our new starter.dev kit: a Nuxt 2 kit with Pinia as the state manager, and Tailwind for the styling. Ok, you might be thinking: "Why should I use a Nuxt 2 kit if Nuxt 3 is just around the corner?" Well, although Nuxt 2 is indeed in just maintenance mode by now, it is the most stable Nuxt version out there, and it is still really powerful, and a great framework for you next app. If you want to build a scalable and stable project, you might want to build it in this version! Ok, without any further ado, let’s see what this kit is all about, and how you can use it in your next application! Lets first talk about our technological options. Nuxt So why Nuxt.js? Lets kick off explaining what Nuxt.js actually is, and why we decided to create a kit with this technology. Nuxt is a framework built on top of Vue. It helps you handle complex configuration with an easy command line setup, such as asynchronous routing with middlewares, great SEO using SSR, automatic code splitting, auto imports and many more. It also brings its own features, such as build in components, different ways for getting data from an API, 2 rendering methods (Server side or Static sites), and even its own loader, transitions, and animations. At first, you might find Nuxt a bit challenging. For example, if you have never used SSR before, it takes time to get used to it, and you will have to change your mindset from Vue as they handle logic quite differently. But we think all that effort will be worth it, because we think Nuxt is a great framework for your next application. It can make your development experience more gratifying and faster, and your site more SEO friendly. Pinia Lets now dive in into the state management library that we choose. As stated from the previous official library Vuex, Pinia is now the default state management library for Vue. When sharing global state within your application, you want it to be secure and easy to use, especially if you are using SSR as we are more likely doing with Nuxt. Pinia is pretty good at helping us with those matters. Using Pinia with Nuxt 2 is a bit tricky but nothing crazy. You just need to install an extra package in order to use Composition API inside Nuxt 2, make some config adjustments, and then you are good to go! Tailwind Tailwind is a great utility first CSS framework that helps you build websites more quickly. Nuxt helps us set up Tailwind from scratch pretty easily when creating our project from the command line. It does the config setups, and also installs the packages we need in order to start using it. What’s inside the Nuxt 2 Kit? Our main goal when creating a starter.dev kit is to provide the essential things for your project without adding too much configuration to make them as flexible as possible. The kit includes two main components. The first one is a counter component, managing the state with a Pinia store and a Fetch component showing how data can be fetched inside Nuxt 2. Both of these components have their own Storybook component, and a test component written with testing library and MSW. These are basic examples to demonstrate how you can utilize these technologies together. The kit also includes ESlint, Prettier and Husky basic configurations. Also, the whole kit is written in TypeScript, which includes configuration within the kit as well. Our goal here is to save you all that time that it would take to get all these tools configured properly when starting a new project. How do I use the kit? With our starter.dev CLI! Of course there are other methods, but this one is for sure the easiest one. Just run the command npx @this dot/create starter. After running this command, a list of available starter.dev kits will show up. Of course you can select the best one that fits your needs. In this case, it will be the nuxt2 pinia tailwind one! It will ask for the name of your new project, and once that is written down, the CLI will start to prepare the kit for you! Now that the kit is installed, you can cd into your new project directory with the name you provided before, and then start coding! Oh, but don’t forget to install the dependencies needed with your package manager of choice (I recommend pnpm 🫣). Take a look at https://starter.dev/kits/nuxt2 pinia tailwind/ so you can have a deeper view of the kit! Where you can read the README.md file for more detailed documentation, as well as looking at the source code, don't forget to read the package.json file to see the scripts available for the kit. Happy coding!...

Jesús Padrón4 mins
Tailwind CSSNuxtJSVue

Introducing next-react-query-tailwind for starter.dev

Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits and structure more complex projects. We’re excited to announce a new kit and showcase featuring Next.js, React Query, and Tailwind CSS. This kit features some of the most popular tools available in the React ecosystem. We wanted to provide our team and the community with a starter kit that uses these libraries and that also comes setup and configured with all of the common tools and utilities that we use when building a new website or app. These include Jest for unit and component testing, Mock Service Worker for network request mocking, Storybook for a component library, ESlint for linting, and Prettier. It can take a substantial amount of time, when starting a new project, to get all these tools configured properly. So, it was important to us when designing these kits to make them as effortless as possible for users. We’ve started to use this kit at This Dot Labs where it has saved us a lot of time on our projects already. We’re excited to make this kit available to the community as well. The easiest way to get started on your new project with next react query tailwind is to install it via the starter.dev CLI: npx @this dot/create starter. This will open a prompt that lists the available starter.dev kits. Select next react query tailwind, provide the name of your project, and the CLI will download the kit for local development. Once you have it installed and cd into your new project directory, it’s as simple as running yarn (or your package manager of choice) to install the packages, and yarn dev to start the Next.JS development server. For more detailed documentation, see the kits README.md file. The starter kit itself is lean. The goal is to provide the things you need for your project and then get out of the way. It includes a Counter component with a co located component test and a Greeting component that makes an API request with React Query also with a co located test file. These are just a couple of basic examples to get you started and to help demonstrate how you can utilize testing and Storybook out of the box. If you’re new to this stack or just want to see what a full scale application built on it looks like, we’ve got you covered. Along with this awesome starter kit, we are also releasing a demo application that we built with it to really show off how you can use it and some good patterns for developing your apps with the tools available in the starter kit. Our demo app is a GitHub clone and it is available on GitHub and viewed at http://next react query tailwind.starter.dev/. For the demo app, we combined React Query with GraphQL using graphql code generator which generates TypeScript types for all of our queries in the app. React Query makes the experience snappy by caching the results from all of our GraphQL queries while we use the app. We use Mock Service Worker to mock all of the queries from our application so it can run offline, in Storybook, or in our component tests. We built our GitHub clone using an MVC style architecture in React where we have specific components responsible for fetching and marshaling our data SomeComponent.data, and a view component responsible for rendering it SomeComponent.view. Our Tailwind styles are defined in CSS modules to keep our markup clean and uncluttered. We have our Storybook stories, component tests, and mock api responses co located with our components in a single directory ie: SomeComponent SomeComponent.stories, SomeComponent.test.tsx etc. Here’s an example of the files included in our GitHub clones FileViewer component: These patterns and structures we’ve used throughout our demo app worked really well for us. Everything is nicely organized making it very easy for anyone to jump in and contribute to the project. Remember that this is just an example of how you can use the tools in this starter kit to build out your next (pun intended) application – but our starter kit leaves the door open for you to structure in whatever way fits best with your project’s needs. Have a request or a question about a starter.dev project? Reach out in the issues to make your requests or ask us your questions. The project is also 100% open sourced so feel free to hop in and code with us!...

Dane Grant4 mins
NextJSTailwind CSSReact