Customize Layout with Tailwind

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

Text Version of the Lesson

In this lesson, we will explore how to change the look of the page's main elements: the logo, colors, layout, and navigation.

Changing the App Name

Your application's default name at the top left, beside the logo, is "Laravel Starter Kit". You can change it in the logo component file.

resources/views/components/app-logo.blade.php:

BEFORE:

<span class="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>

AFTER:

<span class="mb-0.5 truncate leading-none font-semibold">Livewire Tasks</span>

Changing the Name COLOR

With the same example, let's change the color with Tailwind, adding a text-blue-800 class.

resources/views/components/app-logo.blade.php

BEFORE:

<span class="mb-0.5 truncate leading-none font-semibold">Livewire Tasks</span>

AFTER:

<span class="mb-0.5 truncate leading-none font-semibold text-blue-800">Livewire Tasks</span>

Here's the visual result:

Notice: we're running npm run dev in the background to re-compile CSS styles automatically after every change.

Changing the Logo Icon

The logo icon is SVG, so we can change it with...