Tailwind CSS

Tailwind CSS Installeren in React

Wanneer je een nieuw framework gaat leren is het belangrijk dat je hun website bekijkt. Daar vind je installatie-instructies en voorbeelden.

Om Tailwind CSS te installeren in React ga je naar: https://tailwindcss.com/docs/guides/vite

Tailwind Gebruiken

Het is logisch dat je nog niet weet welke classes je moet gebruiken. Gebruik hiervoor de Tailwind-documentatie (te vinden op tailwindcss.com). Het heeft een zoekfunctie waarmee je snel classes en hun effecten kunt vinden.

Basis Voorbeelden

// src/components/TailwindExamples.jsx
const TailwindExamples = () => {
  return (
    <div className="p-8">
      {/* Tekstkleur en -grootte */}
      <h1 className="text-blue-500 text-xl font-bold">
        Blauwe grote tekst
      </h1>
      
      {/* Flexbox */}
      <div className="flex justify-center items-center h-32 bg-gray-100">
        <p>Gecentreerde tekst</p>
      </div>
      
      {/* Padding en Margin */}
      <div className="p-4 m-5 bg-green-200">
        Padding 4, Margin 5
      </div>
      
      {/* Responsiviteit */}
      <div className="block md:flex">
        <div className="bg-red-200 p-4">Eerste div</div>
        <div className="bg-blue-200 p-4">Tweede div</div>
      </div>
    </div>
  );
};

export default TailwindExamples;

Veel Gebruikte Classes

Tekstkleur

text-red-500, text-blue-700, text-gray-900

Achtergrondkleur

bg-red-500, bg-blue-700, bg-gray-100

Tekstgrootte

text-sm, text-lg, text-xl, text-2xl

Padding

p-2      // Alle kanten
px-4     // Horizontaal (left + right)
py-6     // Verticaal (top + bottom)
pt-8     // Alleen top

Margin

m-2      // Alle kanten
mx-4     // Horizontaal
my-6     // Verticaal
mt-8     // Alleen top

Flexbox

flex, justify-center, items-center

Responsiviteit

sm:      // vanaf 640px
md:      // vanaf 768px
lg:      // vanaf 1024px
xl:      // vanaf 1280px

<div className="text-sm md:text-lg lg:text-xl">
  Responsive tekst
</div>

VSCode Extension

Installeer in VSCode de volgende extension: Tailwind CSS IntelliSense

Deze extension geeft je:

• Autocomplete voor Tailwind classes
• Hover previews om te zien welke CSS een class genereert
• Syntax highlighting voor Tailwind directives
• Linting om fouten te vinden

Custom Kleuren Toevoegen

Als je een styling wilt toepassen wat ontbreekt in Tailwind of aanpassen, kun je de configuratie aanpassen.

Stap 1: Open je tailwind.config.js bestand

Stap 2: Voeg je aangepaste kleur toe

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1c92d2',
        'brand-green': '#10B981',
        'my-purple': {
          100: '#E6E6FA',
          500: '#8A2BE2',
          900: '#4B0082'
        }
      }
    },
  },
  plugins: [],
}

Stap 3: Gebruik je aangepaste kleur

const CustomColors = () => {
  return (
    <div>
      <h1 className="text-custom-blue">Custom blauwe tekst</h1>
      <div className="bg-brand-green p-4">Brand groene achtergrond</div>
      <p className="text-my-purple-500">Paarse tekst</p>
    </div>
  );
};

Meer voorbeelden: https://tailwindcss.com/docs/configuration

Custom Values (Arbitrary Values)

Indien je zelf de waardes aan je padding/margin etc wilt toevoegen kun je arbitrary values gebruiken:

const CustomValues = () => {
  return (
    <div>
      {/* Custom margins en padding */}
      <div className="mt-[35px] mx-[12vw] p-[1.5rem]">
        Custom spacing
      </div>
      
      {/* Custom kleuren */}
      <div className="bg-[#ff6b6b] text-[#ffffff]">
        Custom kleuren
      </div>
      
      {/* Custom afmetingen */}
      <div className="w-[350px] h-[200px]">
        Custom afmetingen
      </div>
    </div>
  );
};

Meer info: Tailwind Arbitrary Values

Handy Tips