Elian Codes

Back to all posts

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 on 10/3/2021

Back to all posts