Add Tailwind CSS to your Nuxt 3 App

Install tailwindcss, postcss, and autoprefixer.

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind

npx tailwindcss init

Add the code below to your nuxt.config.ts file

 postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

Replace the content array in your tailwind config file with this

content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],

Create a CSS file, preferably under ./assets/styles/main.css, and add the @tailwind directives for each of Tailwind’s layers.

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

Add the css file to the css array in your nuxt.config.ts file.

 css: ['~/assets/styles/main.css'],

You can now start your build process with npm run dev