Add Tailwind CSS To Nuxt V3

Dec 28, 2022

You can use tailwindcss or @nuxtjs/tailwindcss

I am using @nuxtjs/tailwindcss

Install package

npm install --save-dev @nuxtjs/tailwindcss

Edit nuxt.config.ts

export default defineNuxtConfig({    modules: ['@nuxtjs/tailwindcss'],    tailwindcss: {      cssPath: '~/assets/styles/tailwind.css',    },})

Edit assets/styles/tailwind.css

@tailwind base;@tailwind components;@tailwind utilities;@layer base {  h1 {    @apply text-3xl;  }  h2 {    @apply text-2xl;  }  h3 {    @apply text-xl;  }  a {    @apply underline text-blue-600 hover:text-blue-800  }}@layer components {  a.no-link {    @apply text-inherit no-underline hover:underline;  }}

If you want to overwrite OS dark mode preferences

Edit tailwind.config.js

/** @type {import('tailwindcss').Config} */module.exports = {  darkMode: 'class',  content: [  ],  theme: {    extend: {},  },  plugins: [],}

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.