Getting Nuxt 3 to work with Tailwind 4

As part of this new website experiment, I wanted to give Tailwind a shot. Never used it before, but it seems to have garnered quite the following online. What better testing ground than this here website!

I came across the @nuxt/tailwind module, which sounded like the perfect way to get started. Installation was a breeze, and I was off to the races in no-time. However.. I couldn’t for the life of me figure out how to configure Tailwind. I was trying to set the default serif font to the one you’re looking at now, but nothing I was doing seemed to work. The docs for @nuxt/tailwind were mentioning things that seemingly didn’t exist in tailwind, and the tailwind docs approach caused all sorts of errors in @nuxt/tailwind.

After a brief moment of utter confusion and mild panic, I realized the what the culprit was. Tailwind just — as in a couple of days — released their new major version 4, and the @nuxt/tailwind module hadn't been updated yet to support the new tailwind version. An npm install for tailwind was pulling in version 4, but @nuxt/tailwind wasn't prepped for it yet.

Eventually, I came across Tailwind’s docs for making it work in “raw” Vite, which turned out to work a beaut in Nuxt as well.

At the end of the day, all it took was to uninstall and ignore @nuxt/tailwind altogether, and instead update my nuxt.config.ts with the following:

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
    css: ["~/assets/css/main.css"],

    // ...

    vite: {
        plugins: [tailwindcss()],
    },
});

With this setup, I can use Tailwind 4’s updated configuration format in the main.css file, and everything works as expected:

@import "tailwindcss";

@plugin "@tailwindcss/typography";

@theme {
    --font-serif: "Triplicate A Poly", monospace;
}