Automation

PODCAST

Automate your development with Laravel Vite

Vite

The configuration from the previous section is very basic and has several limitations
- A CDN link is not the best solution if you want to change the look and feel with Tailwind CSS.
  It's better to use a locally hosted, version of Tailwind CSS that will be compiled (automatically) with the build-in JIT compiler.
- We don't have our own JavaScript file yet, in which we group all the scripts that apply to every page.
- You'll need to refresh your browser manually every time you make a change to the code.
All these limitations can be solved easily with Laravel Vite
Follow the instructions in Config -> Laravel Vite to incorporate Vite into your application (resulting in a better, automated workflow)
- Configure Laravel Vite

Update the template

Open resources/views/layouts/vinylshop.blade.php
- Line 7: remove the CDN link to tailwindcss !
- Line 8: add the @vite(['resources/css/app.css', 'resources/js/app.js']) reference to the head to make all the files based on the template hot reloadable

PHP

<!DOCTYPE html>
<html lang="{{ config('app.locale', 'en') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <x-layout.favicons/>
    {{-- <script src="https://cdn.tailwindcss.com"></script> --}}   
    @vite(['resources/css/app.css', 'resources/js/app.js'])         
    <meta name="description" content="{{ $description ?? 'Welcome to the Vinyl Shop' }}">
    <title>{{ $title ?? 'The Vinyl Shop' }}</title>
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-2 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">
        {{--  Navigation  --}}
        <x-layout.nav/>
    </header>
    <main class="container mx-auto flex-1 px-4">
        {{-- Title --}}
        <h1 class="text-3xl mb-4">
            {{ $subtitle ?? $title ?? "This page has no (sub)title" }}
        </h1>
        {{-- Main content --}}
        {{ $slot }}
    </main>
    <x-layout.footer/>
</div>
@stack('script')
</body>
</html>

Tailwind: app.css

By default, Tailwind removes all style properties from all the tags. For example, all headings have the same font size and weight as a normal paragraph
If you’d like to add your own base styles, simply add them to your CSS within a @layer base directive
Open resources/views/home.blade.php and add some dummy headings and text with emmet:
(hr.my-4^h2>{heading 2}^p>lorem^h3>{heading 3}^p>lorem)

php

<x-vinylshop-layout>
    <x-slot name="description">New description</x-slot>
    <x-slot name="title">The Vinyl Shop</x-slot>

    <p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>

    <hr class="my-4">
    <h2>heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis commodi dolorem eaque error esse
        eum impedit iusto necessitatibus optio, perferendis possimus quaerat, quod rem sapiente suscipit voluptates!
        Repudiandae, tempore?</p>
    <h3>heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at dolor dolorum fugit ipsam iusto laborum
        perferendis reprehenderit sapiente tenetur. Ab architecto autem dolorem illo maiores minima natus repellat
        vitae.</p>

    @push('script')
        <script>
            console.log('The Vinyl Shop JavaScript works! 🙂')
        </script>
    @endpush
</x-vinylshop-layout>

Open resources/css/app.css and add some default styling to the base layer for the h2 and h3 tags

css

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

@layer base {
    h2 { 
        @apply text-2xl my-2;
    }
    h3 {
        @apply text-xl italic my-2;
    } 
}

Remove the dummy text from de homepage

Tailwind @layer ?

Tailwind CSS allows you to write your own custom CSS, and you can organize it into layers using the @layer directive.
This is optional but can be useful for maintaining a clear structure in your styles.
The @layer directive allows you to define custom styles within the same conceptual layers as Tailwind's base, components, and utilities:

Base Layer: For global styles and resets.
Components Layer: For custom component styles.
Utilities Layer: For custom utility classes.

Here's an example of how you might use the @layer directive:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h2 {
    @apply text-2xl my-2;
  }
  h3 {
    @apply text-xl italic my-2;
  }
}

@layer components {
  .btn-custom {
    @apply bg-blue-500 text-white py-2 px-4 rounded;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

Livewire

In later chapters, we will use Livewire and Alpine.js to add some interactivity to the application to make our pages more dynamic
When a page contains one or more Livewire components, the corresponding CSS and JavaScript files are automatically added to the page
When a page does not contain any Livewire components, but only elements that contain Alpine.js directives, then it's necessary CSS and JavaScript files must be added manually
- Line 6: add @livewireStyles to the head tag
- Line 16: add @livewireScripts just before the closing body tag

php

<!doctype html>
<html lang="{{ config('app.locale', 'en') }}">
<head>
    ...
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    ...
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-2 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">...</header>
    <main class="container mx-auto p-4 flex-1 px-4">...</main>
    <x-layout.footer />
</div>
@stack('script')
@livewireScripts
</body>
</html>

Automation ​

Vite ​

Update the template ​

Tailwind: app.css ​

Livewire ​

Automation

Vite

Update the template

Tailwind: app.css

Livewire