We gaan op onze site gebruik maken van tailwindcss. Hiervoor moeten we in onze header.php tailwindcss importeren. Omdat we geen gebruik gaan maken van CLI commando's gebruiken wij een CDN. (zie tailwindcss documentatie)
Voeg toe in je header.php binnen de header tag <head> </head>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
Nu kunnen we tailwindcss gaan gebruiken.
Als je de tailwind CSS IntelliSense extensie hebt geïnstalleerd kun je een bestandje met de naam tailwind.config.js aanmaken in je root. Daarna worden tailwindcss classes automatisch aangevuld in je editor.
Hieronder de inhoud van tailwind.config.js
module.exports = { content: ["./**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
Hieronder de code voor ons nieuwe menu. Uiteraard mag je het aanpassen naar eigen wens. Denk aan kleuren, logo etc.
<nav class="bg-gray-500"> <div class="flex justify-between items-center"> <div class="flex justify-start items-center text-xl space-x-4"> <a href="index.php" class="flex items-center"> <img src="images/wizard-logo.png" alt="wizard" class="h-10 p-2"> <span class="font-bold">Code Wizards</span> </a> <a href="index.php" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Home</a> <a href="contact.php" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Contact</a> <a href="about.php" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">About</a> </div> <div class="justify-end"> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Login</a> </div> </div> </nav>
In het menu wordt een logo gebruikt. Je kan het logo hier downloaden. Zet je logo in een map images. (of gebruik je eigen logo). Het menu maakt gebruik van flexbox. In de docs van tailwindcss kan je alle opties bekijken.
Later in de cursus zullen we dit menu nog aanpassen, zodat het ook bruikbaar is op kleinere beeldschermen.
Doordat we tailwindcss zijn gaan gebruiken is alle opmaak van elke HTML tag verdwenen. Laten we de pagina titel een klein beetje opmaak geven.
<h1 class="text-3xl my-4">About</h1>
Grote letters en wat margin onder en boven.
Omdat de tekst wel erg dicht tegen de rand aan staat kan je ook de h1 en de p-tag binnen een div tag plaatsen en deze een margin geven
<div class="sm:mx-10"> <h1 class="text-3xl my-4">About</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem commodi consequuntur cumque dolor eligendi, et magni minus nobis numquam quia, quisquam quo repudiandae unde. Numquam odit quae recusandae rerum vel! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut eum facere iusto, laborum magni neque nesciunt quibusdam quis, similique suscipit tenetur voluptate? Error esse ipsa, iste rem vel velit.</p> </div>
sm:mx-10 betekend vanaf een scherm breder dan 640px dan wordt er een stukje ruimte (margin) aan de linker en rechterkant van het scherm toegevoegd.
Geef de drie pagina's de gewenste opmaak