How to install Tailwind CSS into a Nuxt 3 installation.

Install the required dependencies:

yarn add -D autoprefixer postcss tailwindcss

Create the Tailwind configuration file:

npx tailwindcss init

Add the following configuration to your newly added tailwind.config.js:

// tailwind.config.js
module.exports = {
  mode: "jit",
  purge: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Create a new css file assets/css/tailwind.css and add the following lines:

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

Load the css file and add the postcss configuration to your nuxt configuration file:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
})

Tailwind should now be ready for usage.