ElianCodes

← Back to blog

Published on 04/05/2021 23:27 by Elian Van Cutsem

What does TailwindCSS 2.1 improve?

TailwindCSS 2.1 just got released. Read the official blogpost about that here. I’m excited for it since it brings the new Just-In-Time engine to the core, I wrote a detailed blogpost about what it is and how to use it some time ago, which actually did very well.

Tailwind JIT

The JIT engine got added to the core which means that you don’t have to install a separate package and do some PostCSS changes. Initially the JIT engine had some issues with some CSS classes and properties, but most of them already got ironed out.

Using JIT engine in TailwindCSS 2.1

Using the JIT engine in TailwindCSS 2.0.4 required to set the PostCSS config to include another package called @tailwindcss/jit as seen below:

// postcss.config.js

module.exports = {
  plugins: [require("@tailwindcss/jit"), require("autoprefixer")],
};

Where you now only need the following line mode: 'jit' in your tailwind.config.js

// tailwind.config.js

module.exports = {
  mode: "jit",
  purge: {
    enabled: true,
    content: [
      //...
    ],
  },
  darkMode: "class",
  theme: {
    //...
  },
};

You can even remove the @tailwindcss/jit package completely from your project.

using it with the @nuxtjs/tailwindcss module

The TailwindCSS module for NuxtJS supported JIT mode since v4.0.1, but now you don’t even have to set the mode.

Previously we set it by adding this to our nuxt.config.js file:

// nuxt.confug.js

tailwindcss: {
  // other @nuxtjs/tailwindcss
  jit: true // or false
},

Now we don’t have to include it here anymore, but instead add it as mode: 'JIT' in the tailwind.config.js file:

// tailwind.config.js

module.exports = {
  mode: "jit",
  // other TailwindCSS options
};

Support for CSS filters, blending modes & isolation utilities

This is a CSS feature I haven’t quite used that much, but it’s nice to see TailwindCSS become a very complete and sophisticated CSS framework.

To read more about those check out the official TailwindCSS blogpost about v2.1

Upgrading from 2.0.4 to 2.1

Upgrading is nothing more then yarn upgrade or yarn add tailwindcss@latest

Written by Elian Van Cutsem

← Back to blog
  • 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.

  • 💄 Implementing UnoCSS in Astro

    💄 Implementing UnoCSS in Astro

    UnoCSS is an atomic-CSS engine, designed with flexibility and performance in mind, I wanted to give it a try. Let's take a look at implementing it in Astro and see how it works.