ElianCodes

← Back to blog

Published on 10/03/2021 11:23 by Elian Van Cutsem

What’s new in TailwindCSS v3

TailwindCSSv3.0.0-alpha-1 was released yesterday! It’s not a full release of v3 yet, but might already give us an insight on what is to come with TailwindCSS v3.

I went through the release notes and summed up some things that I found importand below.

New

In TailwindCSS v3, JIT will be the default compiler mode. If you want to learn more about the Just-In-Time compiler, check this blogpost.

All colors are enabled by default. Before you had to import them via the tailwind.config.js.

new utilities:

new variants:

Using JIT in CDN mode

Before, when using the TailwindCSS CDN, you had to give up on a lot of configuration functionality. Well, that isn’t the case anymore since TailwindCSS v3. But TailwindLabs noted: TailwindCSS CDN JIT is intended for development only, do not use in production!. So there is probably still something in the works there.

Using the TailwindCSS CDN JIT isn’t that hard:

<!doctype html>
<html lang="en">
  <head>
    <!-- add base TailwindCSS -->
    +
    <script src="https://cdn-tailwindcss.vercel.app/"></script>

    <!-- add Plugins -->
    <script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>

    <!-- customize config -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              tomato: "tomato",
            },
          },
        },
      };
    </script>

    <!-- add custom styling -->
    <style type="text/tailwindcss">
      body {
        @apply bg-pink-500;
      }
    </style>
  </head>
  <body>
    <!-- -->
  </body>
</html>

Breaking

Notes

If you decide on trying TailwindCSS v3 early, be sure to update the @tailwindcss dependencies to like @tailwindcss/typography and @tailwindcss/forms

You can install or upgrade both tailwindcss and its dependencies by adding @next as a release:

npm i -D tailwindcss@next
npm i -D @tailwindcss/typography@next

All official releasenotes can be found on the TailwindCSS GitHub repo. Check out the official TailwindCSS Documentation

Written by Elian Van Cutsem

← Back to blog
  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.