Snelle Referentie

Veel Gebruikte Classes

  • flex items-center - Centreer verticaal
  • justify-between - Verdeel ruimte
  • space-x-4 - Horizontale spacing
  • rounded-lg - Afgeronde hoeken

Responsive Classes

  • sm:flex - Vanaf 640px
  • md:grid-cols-2 - Vanaf 768px
  • lg:hidden - Vanaf 1024px
  • xl:text-lg - Vanaf 1280px

Handige Tips

  • Gebruik hover: voor hover effecten
  • Combineer met transition voor animaties
  • Stack classes voor complexe styling
  • Check responsive design met DevTools

Button Variaties

Kleine Buttons

class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 transition"

Standaard Buttons

class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"

Grote Buttons

class="px-6 py-3 text-lg bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow-lg hover:shadow-xl"

Outline Buttons

class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-md hover:bg-blue-500 hover:text-white transition"

Layout Voorbeelden

Flex Layout

Item 1
Item 2
Item 3
class="flex justify-between items-center"

Grid Layout

1
2
3
4
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"

Form Elementen

class="w-full px-4 py-2 rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"
class="w-full px-4 py-2 rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"
class="rounded border-gray-300 text-blue-500 focus:ring-blue-200"