How to Use Tailwind CSS with Nuxt 3

Tailwind CSS combined with Nuxt 3 offers an excellent solution for styling your web applications. This tutorial will guide you through the integration steps.

Step 1: Installation

npm install -D @nuxtjs/tailwindcss

yarn add -D @nuxtjs/tailwindcss

Step 2: Configuration

Add Tailwind to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
})

Step 3: Create Tailwind CSS File

Create assets/css/tailwind.css:

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

Step 4: Add CSS to Nuxt Config

export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css']
})

Step 5: Configure tailwind.config.js for Nuxt Content

If you're using Nuxt Content, update tailwind.config.js to include content paths:

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

Conclusion

Tailwind CSS and Nuxt 3 together provide a streamlined, efficient solution for modern web styling. Follow these steps to get up and running quickly. Happy coding!