Courses

Tailwind CSS v4 for Laravel Developers

Practical Application of Tailwind CSS Utility Classes

Let's see how these small utility classes work together.

That is the Tailwind config file we will use for this chapter. It's the default after creating a new Laravel project.

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";

Create the main layout component and two views via Artisan:

php artisan make:component CustomLayout
php artisan make:view profile
php artisan make:view table

And add routes to views. We do not need controllers to develop the layout.

routes/web.php:

Route::view('/profile', 'profile');
Route::view('/table', 'table');

Now, update the main layout component.

resources/views/components/custom-layout.blade.php

<html>
    <head>
        <title>Practical Tailwind Application</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="flex flex-col min-h-screen">
 
        <nav class="border-b shadow">
            <div class="max-w-6xl mx-auto">
                <div class="flex flex-row gap-2 h-12 items-center">
                    <a href="/profile" class="hover:text-indigo-500 hover:underline">Profile</a>
                    <a href="/table" class="hover:text-indigo-500 hover:underline">Table</a>
                </div>
            </div>
        </nav>
 
        <main class="bg-gray-100 grow">
            {{ $slot }}
        </main>
 
        <footer class="border-t">
            <div class="flex flex-row items-center justify-end h-12 max-w-6xl mx-auto">
                <div>{{ date('Y') }}</div>
            </div>
        </footer>
    </body>
</html>

My Profile page

Forms are a part of every website, so let's create one. Update the profile view as follows:

resources/views/profile.blade.php:

<x-custom-layout>
    <div class="bg-white mt-8 max-w-6xl mx-auto rounded-xl p-6 shadow">
        <h1 class="text-2xl font-bold capitalize">my profile</h1>
 
        <form class="flex flex-col items-start mt-6" action="" onSubmit="return false;">
            <label class="text-gray-600" for="username">Username</label>
            <input class="rounded-lg bg-gray-50 focus:bg-white border border-gray-300 mt-1" type="text" id="username" required />
            <button class="bg-indigo-500 text-white font-bold px-2 py-1 rounded hover:bg-indigo-600 mt-4">Update</button>
        </form>
    </div>
</x-custom-layout>

Then, compile all the assets:

npm run dev

Let's look at form elements and the classes applied to them.

<label class="text-gray-600" for="username">Username</label>
 
<input class="rounded-lg bg-gray-50 focus:bg-white border border-gray-300 mt-1" type="text" id="username" required />
 
<button class="bg-indigo-500 text-white font-bold px-2 py-1 rounded hover:bg-indigo-600 mt-4">Update</button>

Here's what these classes do:

Label:

  • text-gray-600 - Applies gray color to the label

Input:

  • rounded-lg - makes corners of the input field rounded
  • bg-gray-50 - sets the background color to light gray
  • focus:bg-white - when the input field is in focus (selected), the background will turn white
  • border - adds a border to the input field
  • border-gray-300 - sets border color to gray-300
  • mt-1 - adds top margin to push input field down

Button:

  • bg-indigo-500 - sets button color to indigo-500
  • text-white - sets button color to white
  • font-bold - makes the text of the button bold
  • px-2 - adds a padding of 0.5rem to both the left and right sides
  • py-1 - adds a padding of 0.25rem to the top and bottom of the button
  • rounded - makes button corners rounded
  • hover:bg-indigo-600 - when you hover the button with the mouse, the background will turn into a bit darker indigo-600 color
  • mt-4 - adds a top margin of 1rem.

And when you visit the /profile URL, you should see the result.

My Profile Page

Table page

Let's style a table but make our own reusable table class this time.

Update the table page:

resources/views/table.blade.php

<x-custom-layout>
    <div class="bg-white max-w-6xl mx-auto my-8 rounded-xl shadow overflow-hidden overflow-y-auto">
        <table class="table">
            <thead>
                <tr>
                    <th>Avatar</th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                @for($i = 0; $i < 5; $i++)
                    <tr>
                        <td><img src="https://picsum.photos/seed/{{ $i }}/48" alt="" class="rounded-full"></td>
                        <td>{{ fake()->firstName() }}</td>
                        <td>{{ fake()->lastName() }}</td>
                        <td>{{ fake()->address() }}</td>
                    </tr>
                @endfor
            </tbody>
        </table>
    </div>
</x-custom-layout>

Then, we can define essential styles for children elements of the table in the app.css file.

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@layer components {
    .table {
        @apply w-full
    }
 
    .table td {
        @apply p-2
    }
 
    .table thead th {
        @apply font-bold text-left px-2 py-4 uppercase border-b-2
    }
 
    .table tbody tr {
        @apply border-b odd:bg-gray-50 last:border-b-0
    }
}

.table:

  • w-full - sets the width of the table to 100%

.table td:

  • p-2 - sets a padding of all sides to all cells to 0.5rem (8px)

.table thead th, these classes will be applied to all table header cells:

  • font-bold - makes font bold
  • text-left - aligns text to the left side
  • px-2 - adds padding to the left and right side
  • py-4 - adds padding to the top and bottom; we set this value higher to make it taller
  • uppercase - all column names are set to be uppercase
  • border-b-2 - adds thicker border to the bottom of the table header

.table tbody tr:

  • border-b - adds a border to the bottom of each row
  • odd:bg-gray-50 - every odd row will have a gray-50 background to achieve a striped table effect. You can also use the even: modifier to style even rows.
  • last:border-b-0 - removes the bottom border from the last row

Visit the /table URL to see the result.

My Profile Page

Previous: Tailwind Classes: Size, Spacing, Colors, Fonts, Borders

No comments yet…

avatar
You can use Markdown