{"id":69222,"date":"2024-04-19T07:00:00","date_gmt":"2024-04-19T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69222"},"modified":"2025-11-17T09:36:31","modified_gmt":"2025-11-17T17:36:31","slug":"jouw-complete-tailwind-css-primer-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/jouw-complete-tailwind-css-primer-nl\/","title":{"rendered":"Jouw Complete Tailwind CSS Primer"},"content":{"rendered":"\n

CSS<\/a>-frameworks hebben de manier waarop ontwikkelaars webontwikkeling benaderen veranderd door het bieden van vooraf gebouwde componenten en stijlen. Veel frameworks hebben echter een eigenzinnig ontwerp en opgeblazen stylesheets die aanpassing beperken.<\/p>\n\n\n\n

Tailwind CSS hanteert een andere aanpak. Als een utility-first CSS-framework biedt het low-level hulpklassen die ontwikkelaars in staat stellen om aangepaste ontwerpen te maken zonder beperkt te worden door vooraf gedefinieerde componenten.<\/p>\n\n\n\n

Met meer dan 675.375 websites<\/a> die Tailwind CSS gebruiken en meer dan 8,61 miljoen afhankelijke repositories<\/a>, is Tailwind meer geworden dan alleen maar een ander CSS-framework.<\/p>\n\n\n\n

In dit artikel gaan we de concepten van Tailwind CSS, het instellen en praktisch gebruik behandelen, zodat je kunt beginnen met het bouwen van je prachtige aangepaste UI’s zonder CSS te leren.<\/p>\n\n\n\n

Laten we beginnen!<\/p>\n\n\n\n

Wat Is Tailwind CSS?<\/h2>\n\n\n\n

Tailwind CSS is een zeer aanpasbaar, low-level CSS framework<\/a> dat een reeks hulpprogramma klassen biedt om snel aangepaste gebruikersinterfaces te bouwen. Het is voor het eerst ontwikkeld en uitgebracht door Adam Wathan in 2017.<\/p>\n\n\n\n

Sindsdien heeft Tailwind een opwaartse trend<\/a> gezien in websites die gebouwd zijn met de Tailwind-bibliotheek.<\/p>\n\n\n\n

\""Gebruiksstatistieken<\/figure>\n\n\n\n

Hoewel de groei momenteel lijkt te zijn vertraagd volgens de BuiltWith-grafieken, wordt het framework regelmatig bijgewerkt met nieuwe functies, klassen en meer.<\/p>\n\n\n\n

Volgens de technologiestapelgegevens van BuiltWith<\/a> gebruiken alleen al in de VS meer dan 100.000 websites Tailwind om hun gebruikersinterfaces te bouwen, samen met het VK, Indonesi\u00eb, Duitsland en andere landen die tot de top 10 gebruikers van deze bibliotheek behoren.<\/p>\n\n\n\n

\"Statistieken<\/figure>\n\n\n\n

De kernfilosofie achter Tailwind CSS is om ontwikkelaars te voorzien van een set bouwblokken in plaats van kant-en-klare componenten. Deze bouwblokken zijn kleine, enkelvoudige hulpprogramma-klassen die gecombineerd kunnen worden om complexe en responsieve lay-outs te cre\u00ebren.<\/p>\n\n\n\n

Deze aanpak biedt meer flexibiliteit en controle over het ontwerp, omdat je elk aspect van je UI kunt aanpassen zonder te worden beperkt door de vooringenomen stijlen van het framework.<\/p>\n\n\n\n

Wat Maakt Tailwind CSS Anders?<\/h2>\n\n\n\n

Traditioneel schrijven ontwikkelaars, wanneer ze met CSS werken, aangepaste klassen in afzonderlijke stylesheets om hun HTML-elementen vorm te geven. Deze aanpak kan leiden tot grote CSS<\/a>-bestanden en het onderhouden en bijwerken van stijlen in een project uitdagend maken.<\/p>\n\n\n\n

Tailwind biedt een uitgebreide set hulpprogramma-klassen die rechtstreeks op HTML-elementen kunnen worden toegepast. Deze klassen zijn zeer samenstelbaar, waardoor ontwikkelaars complexe, aangepaste ontwerpen kunnen bouwen zonder een enkele regel aangepaste CSS te schrijven.<\/p>\n\n\n\n

Bijvoorbeeld, in plaats van het schrijven van een aangepaste CSS-klasse om een knop te stijlen, kun je de vooraf gedefinieerde klassen van Tailwind gebruiken zoals dit:<\/p>\n\n\n\n

<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">\n  Knop\n<\/button><\/code><\/pre>\n\n\n\n
Deze aanpak heeft verschillende voordelen:<\/p>\n\n\n\n
    \n
  1. Snellere Ontwikkeling<\/strong>: De vooraf gedefinieerde klassen helpen ontwikkelaars snel te bouwen en te itereren aan ontwerpen zonder voortdurend te wisselen tussen HTML<\/a> en CSS-bestanden.<\/li>\n\n\n\n
  2. Consistente Stijl<\/strong>: Tailwind biedt een gestandaardiseerde set van klassen, wat helpt om consistentie in design te behouden over een project.<\/li>\n\n\n\n
  3. Kleinere CSS-bestanden<\/strong>: Omdat stijlen rechtstreeks in de HTML worden toegepast, is er geen behoefte aan grote, aangepaste CSS-bestanden.<\/li>\n\n\n\n
  4. Makkelijker Onderhoud<\/strong>: Met stijlen gedefinieerd in de HTML, is het makkelijker om te zien hoe veranderingen een specifiek element be\u00efnvloeden zonder door aparte CSS-bestanden te hoeven zoeken.<\/li>\n\n\n\n
  5. Betere Prestaties: <\/strong>Vele moderne stijlsystemen zoals Emotion<\/a> of Styled Components<\/a> vertrouwen op javascript (meestal tijdens runtime, langzamere prestaties) om je css te renderen. Tailwind is uiteindelijk gewoon CSS.<\/li>\n<\/ol>\n\n\n\n
    \n
    <\/p>\nTailwind heeft mij een complete stack-ontwikkelaar gemaakt ?\u201d<\/em>
    \u2014 <\/em>    Boris Lepikhin<\/a><\/cite><\/blockquote>\n\n\n\n
    Aan De Slag Met Tailwind CSS<\/h2>\n\n\n\n
    Voordat we naar voorbeelden gaan, laten we een basisproject opzetten met Tailwind CSS. We gaan ervan uit dat je enige bekendheid hebt met HTML en CSS. Ook moet je npm ge\u00efnstalleerd hebben op je systeem<\/a>. Zodra je klaar bent, kun je verder gaan!<\/p>\n\n\n\n
    Maak een nieuwe map voor je project en navigeer ernaar:<\/strong><\/p>\n\n\n\n
    mkdir mijn-tailwind-project\ncd mijn-tailwind-project<\/code><\/pre>\n\n\n\n
    Start een nieuw npm-project en installeer Tailwind CSS:<\/strong><\/p>\n\n\n\n
    npm init -y\nnpm install -D tailwindcss<\/code><\/pre>\n\n\n\n
    Maak een tailwind.config.js bestand aan:<\/strong><\/p>\n\n\n\n
    npx tailwindcss init<\/code><\/pre>\n\n\n\n
    Maak een input.css-bestand en voeg het volgende toe:<\/strong><\/p>\n\n\n\n
    @tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
    Werk je tailwind.config.js bestand bij om je input.css te verwerken:<\/strong><\/p>\n\n\n\n
    module.exports = {\n  inhoud: [\".\/src\/**\/*.{html,js}\"],\n  thema: {\n    uitbreiden: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
    Maak een index.html-bestand in een src-map en voeg het volgende toe:<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <link href=\"\/dist\/output.css\" rel=\"stylesheet\">\n  <\/head>\n  <body>\n    <h1 class=\"text-3xl font-bold text-center mt-4\">Welkom bij Tailwind CSS!<\/h1>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Bouw je CSS:<\/strong><\/p>\n\n\n\n
    npx tailwindcss -i .\/src\/input.css -o .\/src\/output.css --watch<\/code><\/pre>\n\n\n\n
    Nu, wanneer je index.html opent in je browser, zou je een grote, vetgedrukte kop moeten zien die zegt Welkom bij Tailwind CSS!<\/strong><\/p>\n\n\n\n
    \""Welkom<\/figure>\n\n\n\n
    Gefeliciteerd, je hebt je eerste Tailwind-project opgezet!<\/p>\n\n\n\n
    Tailwind CSS Hulpclassen<\/h2>\n\n\n\n
    Tailwind CSS biedt een breed scala aan hulpprogrammaklassen die verschillende aspecten van stijlen dekken, zoals lay-out, tussenruimte, typografie, kleuren en meer. Deze klassen volgen een naamconventie die het intu\u00eftief maakt om hun doel te begrijpen.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Laten we enkele veelgebruikte hulpklassen in Tailwind CSS<\/a> verkennen.<\/p>\n\n\n\n
    Tailwind Indelingsklassen<\/h3>\n\n\n\n