Laracasts Profile: XavierHsiao

XavierHsiao wrote a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 25, Tailwind Theme Setup And Initial UI

Seems that Jeffery did not mention displaying flash data. We just need to add it from seesion as below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Idea</title>

    @vite(['resources/css/app.css'])
</head>

<body class="bg-background text-foreground">
    <x-layout.nav />

    {{-- Flash Data --}}
    @if (session('success'))
        <div class="fixed bottom-4 right-4 bg-primary text-primary-foreground px-6 py-3 rounded-xl shadow-lg">
            {{ session('success') }}</div>
    @endif

    <main class="max-w-7xl mx-auto px-6 pb-10">
        {{ $slot }}
    </main>
</body>

</html>

XavierHsiao liked a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 25, Tailwind Theme Setup And Initial UI

@rudysacostacrousset <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1164 409"><path d="M242.974 1.415c-6.2 0-13.201.7-16.301 1.5-7.8 2.1-15.3 5.7-22.6 10.9-6.9 5-9.4 7.9-9.4 11 0 1.4 6.4 8.4 18.8 20.7 15.9 15.8 19.8 19.1 26 22.2 15.2 7.6 32.3 8.5 48.9 2.6 14.1-5.1 16.5-5.5 21.9-4 2.7.8 6.5 2.9 8.7 4.9 5.6 5 7.7 9.8 7.7 17.4 0 9.6-3.1 13.9-30.8 41.9-27.5 27.9-28.8 29.4-33.2 36.8-14.7 24.8-14.4 57.3.6 80.7 5.2 8.2 11.3 14.3 14.1 14.3 3.5 0 83.8-80.2 88.2-88.1 10.5-19 12.4-41.1 5.2-60.9-5.7-15.5-10.4-21.1-52.3-62.2-21.4-20.9-40.9-39.2-44-41.2-9.6-6.1-18.9-8.6-31.5-8.5m-129.55 26.212c-2.725.037-4.7.139-5.25.289-17.9 4.5-23.6 8.7-57.5 42.499-30.6 30.5-36 36.8-42 49.3-12.6 26.3-7.7 59.2 11.8 79.8 6 6.3 6.8 5.9 24.3-12 20.8-21.1 25.6-29.5 28.1-48.8 1.4-10.6-.8-24.3-5.4-34.7-6.5-14.5-4.6-26.7 5.1-32.9 4.2-2.7 5.2-2.9 11.7-2.5 5.6.3 8.3 1 12 3.2 2.6 1.5 18.5 16.4 36.1 33.8 17.2 17.1 33.7 32.6 36.6 34.6 9.2 6.2 16.6 8.3 30.7 8.9 9.6.3 14.1 0 19-1.2 14.3-3.7 30-13.8 30-19.4 0-2.2-7.7-10.4-42.7-45.3-45.6-45.3-48.8-48-63.3-53-5.2-1.8-9.2-2.3-19.5-2.5-3.55-.1-7.025-.126-9.75-.088m445.25 55.687v45h44.9l.3-22.1c.2-12.1.1-22.3-.1-22.5s-10.5-.4-22.8-.4zm193 0v82.901l-5-5.3c-5.6-5.9-13.3-10.5-22.5-13.3-9-2.7-31.2-2.4-41.8.5-26.5 7.5-45.9 28.1-53.9 57.3-1.9 7.2-2.2 10.8-2.2 25.4 0 14.4.3 18.3 2.3 25.5 7.5 28.4 28.5 50.1 55.1 57 9.6 2.5 29.4 2.7 38.4.4 9.7-2.5 18.5-7.3 25.8-14.3l6.8-6.3v18.2h42v-228zm146.073 62.423c-5.429-.01-10.548.178-12.573.478-34.3 5.5-59.4 30.5-66 65.6-2.3 12.3-1.7 33.6 1.4 45.3 8 30.4 28.6 50.6 58 56.8 11.4 2.4 34 2.1 46.1-.5 24.2-5.2 44.1-21.4 52.5-42.8 1.2-3.2 2.5-7 2.9-8.6l.6-2.7h-42l-2.1 4.2c-12.1 23.7-53.5 23.2-67.6-.9-2.5-4.3-6.3-15.1-6.3-17.9 0-1.2 9-1.4 59.6-1.4h59.7l-.6-15.8c-.6-18.3-2.6-27.3-8.7-39.7-9.5-19.3-25.9-32.7-47.5-39-7.1-2.1-11.7-2.7-22-3a207 207 0 0 0-5.427-.078m174.382.024c-5.297-.065-10.243.103-13.655.553-15.5 1.9-32.5 9.701-41.8 19-8.4 8.5-15 22.7-15 32.7v3.3h41.8l1.3-3.799c3.7-11.6 14.1-18.2 28.4-18.2 17.7 0 28.5 10.3 28.5 27.2v4.8h-21.7c-30.9 0-41.2 1.8-57.2 9.6-45.6 22.4-39.7 79.8 9.5 92.4 10.7 2.8 29.1 2.8 40 0 10.7-2.7 21.5-8.3 28.2-14.7 3.1-2.9 5.7-5.1 5.8-5s1.1 2.1 2.3 4.4c2.7 5.5 9.4 10.8 16.6 13.3 6.7 2.3 26.4 2.8 34.1.9l4.4-1.1v-30.5l-5.1-.6c-2.8-.4-6.3-1.4-7.6-2.2-5-3.3-5.3-5.7-5.3-42.4 0-38.3-.6-43.4-6.6-55.9-7.2-15-24.5-27.7-43-31.7-5.312-1.188-15.117-1.946-23.945-2.054m-469.154 3.754c-.5.2-10.6.4-22.5.5l-21.802.3v161h45v-81c0-44.6-.298-80.9-.698-80.8m-479.416 6.861c-4.9-.05-13.584 9.173-42.984 38.639-41.5 41.7-45.101 46.1-50.701 61.5-2.5 6.7-2.7 8.5-2.7 22.3.1 13.5.3 15.8 2.7 22.8 4.8 14.2 9.4 20.5 29.2 40.3 25.4 25.3 53 50.9 59.9 55.6 13.5 9.2 24.7 12.2 42.7 11.5 10.1-.3 14-.9 20.5-3.1 14.5-4.9 28.3-14.6 28.5-20 0-2-33.7-34.9-40-39-17.9-11.7-38.2-13.8-60-6.3-6.4 2.2-12.4 3.7-15.3 3.7-12.9 0-24.2-12.4-22.3-24.5 1.4-8.7 4.3-12.3 34.1-42.5 27.7-28 29.4-30 33.4-38 12.2-24.8 8.3-54.6-10-76.8-2.922-3.54-4.449-6.112-7.015-6.139m777.218 23.092c6.161.067 13.059 1.246 17.496 3.246 11 5.1 17.901 14.302 20.801 27.802l.6 2.799h-76l.6-2.8c3.6-14.9 12.8-25.2 26.9-29.9 2.475-.825 5.907-1.187 9.603-1.147m-188.439 4.112a77 77 0 0 1 3.435.035c7.4.3 9.601.8 15.201 3.5 16.9 8.4 25.9 26.4 24.4 49.2-1.7 26.9-19.2 43.6-43.8 41.7-11.4-.9-17.9-3.8-25.3-11.1-6.7-6.6-9.6-11.7-12.1-21.1-1.8-6.9-2-20.2-.4-27.7 2.6-12.2 10.5-24.2 19.8-29.6 5.862-3.412 11.112-4.834 18.764-4.935m-342.064 30.735c-2.9 0-5.1 1.8-19.3 16.3-14.8 15-16.3 16.9-20.6 25.7-9.2 18.7-10 31.7-3.2 51.4 5.1 14.7 4.2 20.7-3.8 25.7-4.2 2.6-13.3 2.1-19.7-1.1-3-1.5-14.4-12.1-33.5-31-31.3-31.1-36.6-35.3-49.9-39.7-7.1-2.4-9.7-2.7-21.6-2.7-12.2-.1-14.3.2-22.2 2.8-8.6 2.8-23.1 11.3-25.1 14.7-.6.9-.7 2.7-.4 4 .4 1.4 19.3 21 43.9 45.5 45.9 45.7 47.3 46.9 62 52.1 8.6 3 26.5 4.2 36 2.4 8.5-1.5 20.3-6.6 27.2-11.5 7.2-5.1 54.8-53.1 59.5-60 4.8-6.9 8.8-16.1 11.2-25.6 4.1-16 1.4-37.1-6.7-53.3-5.4-10.7-9.8-15.7-13.8-15.7m724.09 29.083c7.467.061 8.31.418 8.31 1.618 0 4.7-2.3 15-4.1 18.5-3.1 6.1-10.3 12.6-17.5 16-12.3 5.8-29.5 4.9-36.8-1.8-7.4-7-7.4-18.6 0-25.6 3.6-3.3 11.1-6.7 17.3-7.8 2.5-.4 12.8-.801 22.9-.901 4.176-.025 7.4-.037 9.89-.017" style="fill:#fff;"/></svg>

XavierHsiao liked a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 25, Tailwind Theme Setup And Initial UI

Here are the full CSS component files for those looking to copy:

resources/css/components/btn.css

button {
    cursor: pointer;
}

.btn {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-primary-foreground);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    height: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    display: inline-block;
}

.btn.btn-outlined {
    background: transparent;
    border: 1px solid var(--color-border);
    border-color: var(--color-border);
    color: var(--color-foreground);
}

.btn.btn-outlined:hover {
    background: color-mix(in srgb, black 25%, var(--color-input));
}

.btn.btn-ghost {
    background: transparent;
}

.btn:has(> svg) {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
}

.btn:hover {
    background: color-mix(in srgb, black 10%, var(--color-primary));
    text-decoration: none;
}

resources/css/components/form.css

label {
    color: var(--color-foreground);
}

.input {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 10);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.input::placeholder {
    color: var(--color-muted-foreground);
}

.input:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

@media (min-width: var(--breakpoint-md)) {
    .input {
        font-size: var(--text-sm);
    }
}

.textarea {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 40);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.textarea::placeholder {
    color: var(--color-muted-foreground);
}

.textarea:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

.label {
    display: block;
    font-size: var(--text-sm);
}

input[type=file] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-foreground);
}

input[type=file]::file-selector-button {
    margin-right: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border-radius: calc(var(--spacing) * 2);
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: var(--color-primary);
    color: rgb(var(--color-background));
}

input[type=file]::file-selector-button:hover {
    opacity: 0.9;
}

.error {
    font-size: var(--text-sm);
    color: var(--color-red-600);
}

.form-muted-icon {
    color: var(--color-muted-foreground);
}

.form-muted-icon:hover {
    color: var(--color-foreground);
}

XavierHsiao liked a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 25, Tailwind Theme Setup And Initial UI

Color theme for those looking to copy:

    --color-background: oklch(0.12 0 0);
    --color-foreground: oklch(0.95 0 0);
    --color-card: oklch(0.16 0 0);
    --color-primary: oklch(0.65 0.15 160);
    --color-primary-foreground: oklch(0.12 0 0);
    --color-border: oklch(0.24 0 0);
    --color-input: oklch(0.24 0 0);
    --color-muted-foreground: oklch(0.6 0 0);

XavierHsiao liked a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 15, Require Authentication With Middleware

9:39 'user_id' => Auth::user()->id,

XavierHsiao wrote a comment+100 XP

2mos ago

Laravel From Scratch (2026 Edition): Ep 10, Controllers

@terdoo-mzer I think it's because /ideas/{idea} contains wild card so if it is defined before /ideas/create then all /ideas/... will go to /ideas/{idea}.

XavierHsiao liked a comment+100 XP

3mos ago

PHP For Beginners: Ep 35, Make Your First Service Container

At the beginning of the video, the way you were interacting with the cup it looked like you were gonna name Starbucks as official sponsor of Laracasts

Laravel Architect

Community Pillar

Top 50

Laracasts Sensei

Laracasts Tutor

Laracasts Master

Ten Thousand Strong

Laracasts Veteran

Chatterbox

1 Year Member

Welcome To The Community

Laracasts Evangelist

Lifer

Subscriber

Pay It Forward

Full Time Learner

Start Your Engines

School In Session

First Thousand