DEV Community

Cover image for Adding Tailwind to Nuxt 3
Eric O Okiti
Eric O Okiti

Posted on

Adding Tailwind to Nuxt 3

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
Enter fullscreen mode Exit fullscreen mode

Generate Tailwind config file

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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: {},
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Just like that, I was able to use tailwind with Nuxt 3. Feel free to drop comments or request modification.

Top comments (2)

Collapse
 
joseluisrnp profile image
JosĂ© Luis Recio • Edited

Why not just use the official module? nuxt.com/modules/tailwindcss

I use it in some projects with just 3 without problems

Collapse
 
luan_b6b4a35f438e77a4355c profile image
Luan

Ty dude