Elke Laravel website kan wel wat stijl gebruiken, en Tailwind CSS is de eenvoudigste manier om je site wat flair te geven. Dit utility-first CSS framework biedt voorgedefinieerde classes om je HTML elementen te stylen. In plaats van eindeloos CSS code te schrijven, kun je dus snel custom webpagina’s bouwen en daarna gemakkelijk je stylesheets onderhouden en opschalen.

Tailwind maakt deel uit van de TALL stack, samen met Alpine.js en Livewire. De Laravel gemeenschap heeft deze full-stack ontwikkeloplossing gebouwd om developers van alle niveaus te helpen snel prototypes van webapplicaties te maken. Deze oplossingen zijn eenvoudig te gebruiken zonder diepgaande kennis van front-end of back-end technologieën.

Dit praktische artikel laat zien hoe je Tailwind CSS kunt gebruiken om je Laravel project op te leuken en het vervolgens kunt deployen met MyKinsta.

Je Laravel project verbeteren met Tailwind

Om te beginnen maak je een basic Laravel pagina en gebruik je Tailwind CSS om deze met minimale inspanning te stylen.

Vereisten

Om deze tutorial te kunnen volgen, heb je nodig:

Bekijk de volledige projectcode om het uiteindelijke project te zien.

Laravel project en Tailwind instellen

Maak een nieuw Laravel project met Composer:

  1. Open de terminal naar de map waar je het project wilt hebben en voer het uit:
composer create-project laravel/laravel my-project
  1. Ga naar de map my-project om de vereiste pakketten te installeren:
cd my-project
  1. Installeer de pakketten om met Tailwind te werken:
npm install -D tailwindcss postcss autoprefixer
  1. Voer het volgende commando uit om de configuratiebestanden van Tailwind in te stellen:
npx tailwindcss init -p

Deze actie plaatst twee bestanden in de root van je project: tailwind.config.js en postcss.config.js.

Je templatepaden configureren

  1. Configureer vervolgens je templatepadenin het tailwind.config.js bestand. Laravel zoekt standaard naar CSS-bestanden in de public directory. Het templatepad vertelt Laravel waar hij de CSS-bestanden van de applicatie kan vinden.
  1. Vervang de code in het tailwind.config.js bestand door dit:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

De Tailwind CSS richtlijnen toevoegen aan de CSS van het project

  1. Om de richtlijnen voor Tailwind CSS toe te voegen, ga je naar de resources/css map en open je het app.css bestand.
  1. Voeg dan de volgende code toe:
@tailwind base;
@tailwind components;
@tailwind utilities;

De applicatie bouwen

Voordat je je app lokaal uitvoert:

  1. Start de Vite ontwikkelingsserver:
npm run dev

Dit commando bundelt je statische assets bestand, inclusief Tailwind CSS, en start de Vite lokale server.

  1. Gebruik Artisan om je Laravel app te draaien:
php artisan serve

Je app zou nu moeten draaien op http://127.0.0.1:8000/. Het toont de standaard uitvoer van een nieuw gemaakte Laravel applicatie.

Bij het openen van het resources/views/welcome.blade.php route view bestand, kun je zien dat het al gebruik maakt van Tailwind utility classes.

Een simpel Tailwind component maken

Om beter te begrijpen hoe Tailwind werkt:

  1. Open resources/views/welcome.blade.php.
  1. Verwijder de code uit de welkom preview van de applicatie.
  1. Vervang deze door de onderstaande code, die een prachtig kaartcomponent rendert:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

De bovenstaande code gebruikt Vite om het app.css bestand te importeren via @vite('resources/css/app.css'). Het importeert ook Tailwind. Het maakt een fundamenteel opmaakcomponent om een blogkaart na te maken met behulp van deze Tailwind CSS utility classes:

  • max-w-sm – Stelt de maximale breedte van de container in op de sm (kleine) breekpuntgrootte.
  • m-24 – Voegt een marge van 24 eenheden (96px of 6rem) toe aan alle zijden van de container.
  • rounded – Voegt een border-radius toe om de hoeken van de container af te ronden.
  • overflow-hidden – Verbergt alle inhoud die de container overlapt.
  • shadow-lg – Voegt een schaduweffect toe aan de container.
  • w-full – Stelt de breedte van de afbeelding in op 100% van de container.
  • px-6 py-4 – Voegt opvulling toe van 6 eenheden (24px of 1,5rem) op de x-as en 4 eenheden (16px of 1rem) op de y-as.
  • font-bold – Stelt het font-gewicht van de tekst in op vet.
  • text-xl – Stelt de lettergrootte van de tekst in op extra groot.
  • mb-2 – Voegt een ondermarge van 2 eenheden (0.5rem of 8px) toe aan het element.
  • text-gray-600 – Stelt de tekstkleur in op donkergrijs.
  • text-base – Stelt de lettergrootte van de tekst in op de standaardwaarde.

Als je een voorbeeld van je applicatie bekijkt in de browser, zou je een uitvoer moeten zien zoals hieronder.

Component voorbeeld op een webpagina
Component voorbeeld op een webpagina

Je Laravel Tailwind project deployen naar Kinsta

Voordat je je Laravel applicatie uitrolt en host met Kinsta, moet je nog een paar wijzigingen aanbrengen om ervoor te zorgen dat het goed werkt wanneer wij hem voor je hosten.

  1. Open app/Http/Middleware/TrustProxies.php. Verander de waarde van protected $proxies om je Laravel app alle proxies te laten vertrouwen:
protected $proxies = '*';
  1. Maak een nieuw .htaccess bestand in de hoofdmap van je project en plak de volgende code:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Maak een nieuwe Git repository en push je code ernaar (Kinsta ondersteunt pushen vanaf GitHub, GitLab en Bitbucket).
  1. Log in op je Kinsta account of maak een nieuwe aan. Op je MyKinsta Dashboard klik je op de knop Dienst toevoegen en vervolgens op Applicatie, zoals in de schermafbeelding hieronder.
Een applicatie toevoegen op MyKinsta
Een applicatie toevoegen op MyKinsta

MyKinsta vraagt je om je Git account te koppelen. Vul de autorisatie in zoals gevraagd, selecteer dan het project dat je eerder naar je repository hebt gepushed en de branch die je wilt gebruiken.

Nieuwe applicatiedetails configureren op Kinsta
Nieuwe applicatiedetails configureren op Kinsta
  1. Voeg je Laravel APP_KEY toe in het gedeelte Omgevingsvariabelen. De sleutel staat in het .env bestand van je lokale projectmap.
Applicatie omgevingsvariabelen configureren op Kinsta
Applicatie omgevingsvariabelen configureren op Kinsta
  1. Klik op Doorgaan en selecteer de bouwomgeving volgens je voorkeuren.
  1. Laat de startopdracht in het gedeelte Resources voorlopig leeg en klik op Doorgaan om verder te gaan.
  1. Vul ten slotte de betalingsgegevens in. De implementatie start onmiddellijk.

Je hebt twee build packs nodig om je applicatie goed te laten draaien: PHP om de commando’s php uit te voeren en Node.js, om de commando’s npm uit te voeren. Om dit te doen:

  1. Ga naar je applicatie en klik in de navigatie aan de linkerkant op Instellingen.
  1. Klik op Buildpack toevoegen en voeg de buildpacks voor Node.js en PHP toe. Zorg er echter voor dat het PHP buildpack als laatste wordt toegevoegd, omdat dit een op PHP gebaseerde applicatie is.
  1. Klik op de knop Nu deployen die verschijnt na het toevoegen van de nieuwe buildpacks, zoals geïllustreerd in de afbeelding hieronder.
App deployen na toevoegen build pack op Kinsta
App deployen na toevoegen build pack op Kinsta
  1. Ga ten slotte naar het tabblad Processen van je applicatie, bewerk het standaard Web proces en vervang de Start commando door het volgende:
npm run build && heroku-php-apache2
Het startcommando van het proces bijwerken op Kinsta
Het startcommando van het proces bijwerken op Kinsta

Na het bijwerken van het startcommando wordt je app automatisch opnieuw uitgerold met het nieuwe commando. Zodra de deployment is geslaagd, kun je het domein bezoeken om de mooie kaartcomponent te zien die je hebt gemaakt en beginnen met het testen en ontwikkelen van je applicatie.

Samenvatting

Tailwind helpt je om je Laravel project van eenvoudig tot perfect verbluffend te maken. Het is eenvoudig te gebruiken, waardoor je geen enorme stapels code hoeft te typen om het uiterlijk te krijgen dat je wilt.

Nu je de basis kent, kun je de mogelijkheden van Tailwind verkennen om het uiterlijk van je applicatie te verbeteren met mooie lettertypen en betoverende effecten. Deploy alles vervolgens met MyKinsta om de wereld ook van jouw applicatie te laten genieten.

Marcia Ramos Kinsta

Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.