Wat is Tailwind?

Tailwind is een CSS framework dat werkt met utility classes: in plaats van zelf CSS te schrijven gebruik je voorgemaakte classes als flex, p-4, text-center, bg-blue-500.

Zonder Tailwind

<button class="my-button">Klik</button>

<style scoped>
.my-button {
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border-radius: 6px;
  font-weight: 600;
}
</style>

Met Tailwind

<button class="px-4 py-2 bg-blue-500 text-white rounded-md font-semibold">
  Klik
</button>

Voordeel: geen CSS schrijven, geen bestand wisselen, geen class-namen verzinnen. Lijkt eerst onleesbaar, maar went snel.

Installeren in een Vue + Vite project

Tailwind v4 (de huidige versie) heeft een speciale Vite-plugin die alles makkelijk maakt.

Stap 1: installeer de packages

npm install tailwindcss @tailwindcss/vite

Stap 2: voeg de plugin toe in vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()    // ← toegevoegd
  ]
})

Stap 3: importeer Tailwind in je globale CSS

/* src/assets/main.css */
@import "tailwindcss";

Stap 4: zorg dat main.css geïmporteerd is in main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'      // ← deze regel

createApp(App).mount('#app')

Stap 5: dev server herstarten

npm run dev

Klaar. Vanaf nu werken alle Tailwind classes in elk component.

Gebruiken in Vue

Gebruik gewoon de utility classes in je templates — alsof het normale HTML is:

<template>
  <div class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-900 mb-2">
      Welkom
    </h1>
    <p class="text-gray-600 mb-4">
      Dit is een mooie kaart, helemaal in Tailwind.
    </p>
    <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      Beginnen
    </button>
  </div>
</template>

Goed om te weten: Tailwind en <style scoped> kun je gewoon naast elkaar gebruiken. De meeste dingen doe je met utilities, en voor heel custom dingen pak je nog steeds <style scoped>.

Dynamische classes met Tailwind

Tailwind classes combineren prima met Vue's :class binding:

Voorwaardelijke styling

<script setup>
import { ref } from 'vue'

const isActive = ref(false)
</script>

<template>
  <button
    class="px-4 py-2 rounded font-semibold"
    :class="isActive
      ? 'bg-green-500 text-white'
      : 'bg-gray-200 text-gray-700'"
    @click="isActive = !isActive"
  >
    {{ isActive ? 'Aan' : 'Uit' }}
  </button>
</template>

Met object syntax

<button
  class="px-4 py-2 rounded"
  :class="{
    'bg-green-500 text-white': isActive,
    'bg-gray-200': !isActive
  }"
>
  {{ isActive ? 'Aan' : 'Uit' }}
</button>

Let op: Tailwind scant je code op class-namen. Bouw class-namen niet dynamisch op:

<!-- ❌ werkt niet — Tailwind ziet 'bg-red-500' niet -->
<div :class="`bg-${color}-500`">

Goed — schrijf de volle class-naam:

<div :class="color === 'red' ? 'bg-red-500' : 'bg-blue-500'">

Belangrijke Regels

  • Installatie: Tailwind v4 + @tailwindcss/vite plugin
  • Importeer @import "tailwindcss" in je globale CSS
  • Vergeet niet import './assets/main.css' in main.js
  • Dev server herstarten na installatie
  • Geen dynamische class-namen — schrijf volle namen uit
  • Combineren met scoped CSS mag voor de uitzonderingen

Veelgemaakte Fouten

Fout — CSS niet importeren in main.js:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// ❌ vergeten: import './assets/main.css'

createApp(App).mount('#app')

Tailwind werkt niet zonder die import. Gewoon vergeten is de #1 reden dat het "niet werkt".

Fout — dev server niet opnieuw starten:

Na het toevoegen van een plugin aan vite.config.js moet je Ctrl+C en opnieuw npm run dev. Hot reload werkt niet voor config-wijzigingen.

Fout — interpolated class-namen:

<div :class="`p-${spacing}`">
<!-- ❌ Tailwind ziet 'p-4' niet in je broncode -->

Goed:

<div :class="spacing === 'lg' ? 'p-8' : 'p-4'">
<!-- ✅ volle class-namen -->