Installer Tailwind CSS - Vue

Documentation officielle

Les informations ci-dessous proviennent de la documentation officielle de Tailwind CSS.

1 - Installation de tailwindcss avec Vite

npm install -D tailwindcss postcss autoprefixer

2 - Générer les fichiers nécessaires

npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3 - Configurer le fichier généré

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4 - Ajout du CSS

/src/assets/main.css

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