Wie man Tailwind CSS in ein Nuxt 3 Projekt installiert.

Installiere die folgenden Abhängigkeiten:

yarn add -D autoprefixer postcss tailwindcss

Erstelle die Tailwind Konfigurationsdatei:

npx tailwindcss init

Füge folgende Konfiguration zu deiner neu erstellten tailwind.config.js hinzu:

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

Erstelle eine neue css Datei assets/css/tailwind.css und füge folgenden Inhalt ein:

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

Referenziere die css-Datei und füge die postcss-Konfiguration zu der Nuxt-Konfigurationsdatei hinzu:

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

Tailwind sollte nun einsatzbereit sein.