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: