Install Tailwind CSS with Nuxt
1. Install Tailwind CSS and its peer dependencies
  1. npm install tailwindcss postcss autoprefixer
2. Create tailwind.config.js file
  1. npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js
3. Add Tailwind to PostCSS configuration
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})
4. Configure Tailwind content paths
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],
  ...
}
5. Add the Tailwind directives
assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
6. Start using Tailwind
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  css: ['~/assets/css/tailwind.css'],
  ...
})