ElianCodes

← Back to blog

Published on 03/18/2021 18:27 by Elian Van Cutsem

Add TailwindCSS JIT to your Nuxtjs site

TailwindCSS just released a feature called Just-In-Time. The TailwindCSS blog published an article about it here. It’s available (for now, since it will be added in TailwindCSS v3.0) on NPM. I dedicated another blogpost to this, so I wont go deeper into that topic here. But what is interesting here, is that it changes the whole way how you use TailwindCSS with Nuxtjs

Upgrading nuxtjs/tailwindcss

adding TailwindCSS became really easy since nuxtjs/tailwindcss v4.0.0. Before (like explained on the Tailwind Install Docs), you needed to install a great deal of packages to be able to use TailwindCSS with Nuxt. Also they were outdated versions of packages. Now it’s just the @nuxtjs/tailwindcss module and PostCSS. So first install those.

yarn add -D @nuxtjs/tailwindcss postcss@latest

Then add the module to your buildModules in nuxt.config.js

// nuxt.config.js
export default {
  buildModules: ["@nuxtjs/tailwindcss"],
};

The modules requires some additional configurations if you’re not using the default location for the ~/assets/css/tailwind.css or the ./tailwind.config.js files. You can read more about options on the nuxtjs/tailwindcss module website.

Now TailwindCSS should work if you created the files!

Adding @tailwindcss/jit

Now adding jit to TailwindCSS is just as easy as configuring it in your nuxt.config.js file.

// nuxt.config.js
export default {
  tailwindcss: {
    jit: true,
  },
};

that’s litterally it…

You can add a lot of options here, if you’d like, you can even include your whole configuration (which you normally put in tailwind.config.js) in here. You can read more about all available options on the nuxtjs/tailwindcss module website

Using with Sass preprocessor

If you’ve read more than 2 articles on this blog, you’ll know that I’m a fan of using TailwindCSS @apply classes with Sass. It’s easier to maintain, clearly readable and just cooler!

But to take advantage of this together with Nuxtjs, it requires some additional configuration. But don’t worry, I’ll guide you trough it!

If you’re using @nuxtjs/tailwindcss v^4.0.0 or followed my guide above, you probably have installed postcss@latest. If you haven’t, do so, because you’ll need it.

Then we just need to install some additional packages to tell PostCSS what we’re expecting of it.

yarn add -D postcss-easy-import sass

Now we have all packages ready to go, we’ll just need to configure our nuxt.config.js file so it uses them.

// nuxt.config.js
export default {
  tailwindcss: {
    cssPath: "~/assets/scss/tailwind.scss",
    jit: true,
  },
  build: {
    postcss: {
      plugins: {
        "postcss-easy-import": { prefix: "_", extensions: [".css", ".scss"] },
        "postcss-nested": {},
      },
    },
  },
};

You can also disable the viewer option in the config for faster build times!

That should be it! I hope you received some value out of it!

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.