Skip to main content

Customize Layout with React/Tailwind

Premium
5 min read

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/js/components/app-logo.tsx

BEFORE:

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

AFTER:

<span className="mb-0.5 truncate leading-none font-semibold">React Tasks</span>

Changing the Name COLOR

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

resources/js/components/app-logo.tsx

BEFORE:

<span className="mb-0.5 truncate leading-none font-semibold">React Tasks</span>

AFTER:

<span className="mb-0.5 truncate leading-none font-semibold text-blue-800">React 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 any other SVG we want.

resources/js/components/app-logo-icon.tsx

BEFORE:

<svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
    <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
    />
</svg>

AFTER:

<svg {...props} viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.015 25.238V0H0v32h12.303c7.387 0 12.223-2.902 14.854-7.028l-14.854.266H7.015Z" fill="#fff" />
    <path
        d="M13.95 6.416h2.445c4.384 0 7.44 3.168 7.44 8.146 0 1.278-.212 2.423-.558 3.435h6.351c.24-1.092.372-2.237.372-3.435C30 6.336 24.128.027 16.422.027h-2.445l-.027 6.389Z"
        fill="#fff"
    />
</svg>

Visual result:

Changing the Logo Color

There are two different component files...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

60 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

dr_capins avatar
dr_capins

A question from a newbie of React and js: why app name is hardcoded insted of injected from .ENV file?

Povilas Korop avatar
Povilas Korop

Good question! It SHOULD be taken from the .env, indeed, like it was done in previous starter kits. Something to improve in the future versions of the new starter kits.

dr_capins avatar
dr_capins

Thank you. Great course, as always! Keep going on this path

Paul van Vulpen avatar
Paul van Vulpen

I changed the name into {import.meta.env.VITE_APP_NAME} so that way it reflects the APP_NAME from the .env file.

Sandeep avatar
Sandeep

How can I quickly locate a .tsx component in VS Code (v1.104)? I find myself spending too much time searching file by file for small changes. I also haven’t worked with such a complex component hierarchy before.

Modestas avatar
Modestas

Not sure what you have in mind, but file search often helps!

Also, there's a Typescript plugin you can install, which allows you to ctrl/cmd + click on a file/component and go directly to it

Sandeep avatar
Sandeep

Thank you, Modestas.

Just to clarify, in this lesson we updated the App Name and the Logo Icon. Since there isn’t any specific CSS class, logo class, or JavaScript reference for these, how can we identify that the elements are located in app-logo.tsx and app-logo-icon.tsx, respectively?

Modestas avatar
Modestas

Honestly, there's two options you can have here:

Option 1: You simply open up the header and find the <AppLogo/> and click on it. That's the most common thing.

Option 2: There are "developer tools" available like this one https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en - where you can install it and preview all the components in your pages (local only!). From there, you can see the data, components and all other debugging information. And it comes with a inspect type of thing, where you can select an element and see which component that is :)

There's no other "good" ways that I have seen to do this... Maybe you can just copy the element classes and try to search for them, but that might not work :)

Hope that helps!

Sandeep avatar
Sandeep

Thanks, Modestas. That’s very helpful.

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.