Adding Tailwind to Nuxt 3

#webdev #javascript #node

This week, I was setting up a Nuxt 3 application and I googled how to add tailwind to a Nuxt 3 application, I saw lots of results that almost worked. I guess the writers didn't really test what they wrote or better yet they're not developers, just technical writers (I'm not throwing shades at anyone 🤓). I decided to drop this little post so I could reference in the future and it can also help others as well.

Install Tailwind dependencies

To get started, install the tailwind dependencies

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Generate Tailwind config file

npx tailwindcss init -p

The above command generates a tailwind.config.js file in the root of your project.

Configuring Tailwind

Open the tailwind.config.js file in your editor and modify to match the code below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue"
  ],  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind to Style

Add the following to a assets/css/styles.css file (Create file if it doesn't exit).

@tailwind base;
@tailwind components;
@tailwind utilities;

Update Nuxt config

Finally we update our Nuxt config to include our css in the build process and also make use of tailwind plugin in postcss (Postcss supercharges our css with JavaScript). Autoprefixer helps us write css without worrying about vendor prefixes.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
  ],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})