Update to Tailwind CSS 4

This commit is contained in:
Anna-Sara Sélea 2026-06-01 18:28:36 +02:00
parent fed392164e
commit 8c777ae294
22 changed files with 754 additions and 1612 deletions

2219
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -9,15 +9,15 @@
"@headlessui/react": "^2.0.0", "@headlessui/react": "^2.0.0",
"@inertiajs/react": "^2.0.0", "@inertiajs/react": "^2.0.0",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"@tailwindcss/postcss": "^4.3.0",
"@vitejs/plugin-react": "^4.2.0", "@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.12",
"axios": "^1.7.4", "axios": "^1.7.4",
"concurrently": "^9.0.1", "concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"tailwindcss": "^3.2.1", "tailwindcss": "^4.3.0",
"vite": "^6.0" "vite": "^6.0"
} }
} }

View file

@ -1,6 +1,5 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {},
}, },
}; };

View file

@ -1,7 +1,33 @@
@tailwind base; @import 'tailwindcss';
@tailwind components;
@tailwind utilities;
@plugin '@tailwindcss/forms';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@theme {
--font-sans:
Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
#reserve-form-container { #reserve-form-container {
max-width: 1400px !important; max-width: 1400px !important;

View file

@ -4,7 +4,7 @@ export default function Checkbox({ className = '', ...props }) {
{...props} {...props}
type="checkbox" type="checkbox"
className={ className={
'rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 ' + 'rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500 ' +
className className
} }
/> />

View file

@ -8,7 +8,7 @@ export default function DangerButton({
<button <button
{...props} {...props}
className={ className={
`inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-red-700 ${ `inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-red-500 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-red-700 ${
disabled && 'opacity-25' disabled && 'opacity-25'
} ` + className } ` + className
} }

View file

@ -46,9 +46,9 @@ const Content = ({
let alignmentClasses = 'origin-top'; let alignmentClasses = 'origin-top';
if (align === 'left') { if (align === 'left') {
alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0'; alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right inset-s-0';
} else if (align === 'right') { } else if (align === 'right') {
alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0'; alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left inset-e-0';
} }
let widthClasses = ''; let widthClasses = '';
@ -91,7 +91,7 @@ const DropdownLink = ({ className = '', children, ...props }) => {
<Link <Link
{...props} {...props}
className={ className={
'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none ' + 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-hidden ' +
className className
} }
> >

View file

@ -10,7 +10,7 @@ export default function NavLink({
<Link <Link
{...props} {...props}
className={ className={
'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' + 'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-hidden ' +
(active (active
? 'border-indigo-400 text-gray-900 focus:border-indigo-700' ? 'border-indigo-400 text-gray-900 focus:border-indigo-700'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 focus:border-gray-300 focus:text-gray-700') + : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 focus:border-gray-300 focus:text-gray-700') +

View file

@ -8,7 +8,7 @@ export default function PrimaryButton({
<button <button
{...props} {...props}
className={ className={
`inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 ${ `inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 ${
disabled && 'opacity-25' disabled && 'opacity-25'
} ` + className } ` + className
} }

View file

@ -13,7 +13,7 @@ export default function ResponsiveNavLink({
active active
? 'border-indigo-400 bg-indigo-50 text-indigo-700 focus:border-indigo-700 focus:bg-indigo-100 focus:text-indigo-800' ? 'border-indigo-400 bg-indigo-50 text-indigo-700 focus:border-indigo-700 focus:bg-indigo-100 focus:text-indigo-800'
: 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 focus:border-gray-300 focus:bg-gray-50 focus:text-gray-800' : 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 focus:border-gray-300 focus:bg-gray-50 focus:text-gray-800'
} text-base font-medium transition duration-150 ease-in-out focus:outline-none ${className}`} } text-base font-medium transition duration-150 ease-in-out focus:outline-hidden ${className}`}
> >
{children} {children}
</Link> </Link>

View file

@ -10,7 +10,7 @@ export default function SecondaryButton({
{...props} {...props}
type={type} type={type}
className={ className={
`inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 ${ `inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-xs transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 ${
disabled && 'opacity-25' disabled && 'opacity-25'
} ` + className } ` + className
} }

View file

@ -21,7 +21,7 @@ export default forwardRef(function TextInput(
{...props} {...props}
type={type} type={type}
className={ className={
'rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ' + 'rounded-md border-gray-300 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 ' +
className className
} }
ref={localRef} ref={localRef}

View file

@ -40,7 +40,7 @@ export default function AuthenticatedLayout({ header, children }) {
<span className="inline-flex rounded-md"> <span className="inline-flex rounded-md">
<button <button
type="button" type="button"
className="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none" className="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-hidden"
> >
{user.name} {user.name}
@ -85,7 +85,7 @@ export default function AuthenticatedLayout({ header, children }) {
(previousState) => !previousState, (previousState) => !previousState,
) )
} }
className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none" className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-hidden"
> >
<svg <svg
className="h-6 w-6" className="h-6 w-6"
@ -163,7 +163,7 @@ export default function AuthenticatedLayout({ header, children }) {
</nav> </nav>
{header && ( {header && (
<header className="bg-white shadow"> <header className="bg-white shadow-sm">
<div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
{header} {header}
</div> </div>

View file

@ -84,7 +84,7 @@ export default function Login({ status, canResetPassword }) {
{canResetPassword && ( {canResetPassword && (
<Link <Link
href={route('password.request')} href={route('password.request')}
className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
> >
Forgot your password? Forgot your password?
</Link> </Link>

View file

@ -105,7 +105,7 @@ export default function Register() {
<div className="mt-4 flex items-center justify-end"> <div className="mt-4 flex items-center justify-end">
<Link <Link
href={route('login')} href={route('login')}
className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
> >
Already registered? Already registered?
</Link> </Link>

View file

@ -39,7 +39,7 @@ export default function VerifyEmail({ status }) {
href={route('logout')} href={route('logout')}
method="post" method="post"
as="button" as="button"
className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
> >
Log Out Log Out
</Link> </Link>

View file

@ -14,7 +14,7 @@ export default function Dashboard() {
<div className="py-12"> <div className="py-12">
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-sm sm:rounded-lg"> <div className="overflow-hidden bg-white shadow-xs sm:rounded-lg">
<div className="p-6 text-gray-900"> <div className="p-6 text-gray-900">
You're logged in! You're logged in!
</div> </div>

View file

@ -17,7 +17,7 @@ export default function Edit({ mustVerifyEmail, status }) {
<div className="py-12"> <div className="py-12">
<div className="mx-auto max-w-7xl space-y-6 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl space-y-6 sm:px-6 lg:px-8">
<div className="bg-white p-4 shadow sm:rounded-lg sm:p-8"> <div className="bg-white p-4 shadow-sm sm:rounded-lg sm:p-8">
<UpdateProfileInformationForm <UpdateProfileInformationForm
mustVerifyEmail={mustVerifyEmail} mustVerifyEmail={mustVerifyEmail}
status={status} status={status}
@ -25,11 +25,11 @@ export default function Edit({ mustVerifyEmail, status }) {
/> />
</div> </div>
<div className="bg-white p-4 shadow sm:rounded-lg sm:p-8"> <div className="bg-white p-4 shadow-sm sm:rounded-lg sm:p-8">
<UpdatePasswordForm className="max-w-xl" /> <UpdatePasswordForm className="max-w-xl" />
</div> </div>
<div className="bg-white p-4 shadow sm:rounded-lg sm:p-8"> <div className="bg-white p-4 shadow-sm sm:rounded-lg sm:p-8">
<DeleteUserForm className="max-w-xl" /> <DeleteUserForm className="max-w-xl" />
</div> </div>
</div> </div>

View file

@ -77,7 +77,7 @@ export default function UpdateProfileInformation({
href={route('verification.send')} href={route('verification.send')}
method="post" method="post"
as="button" as="button"
className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
> >
Click here to re-send the verification email. Click here to re-send the verification email.
</Link> </Link>

View file

@ -4,12 +4,12 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
const handleImageError = () => { const handleImageError = () => {
document document
.getElementById('screenshot-container') .getElementById('screenshot-container')
?.classList.add('!hidden'); ?.classList.add('hidden!');
document.getElementById('docs-card')?.classList.add('!row-span-1'); document.getElementById('docs-card')?.classList.add('row-span-1!');
document document
.getElementById('docs-card-content') .getElementById('docs-card-content')
?.classList.add('!flex-row'); ?.classList.add('flex-row!');
document.getElementById('background')?.classList.add('!hidden'); document.getElementById('background')?.classList.add('hidden!');
}; };
return ( return (
@ -41,7 +41,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
{auth.user ? ( {auth.user ? (
<Link <Link
href={route('dashboard')} href={route('dashboard')}
className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white" className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
> >
Dashboard Dashboard
</Link> </Link>
@ -49,13 +49,13 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<> <>
<Link <Link
href={route('login')} href={route('login')}
className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white" className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
> >
Log in Log in
</Link> </Link>
<Link <Link
href={route('register')} href={route('register')}
className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white" className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
> >
Register Register
</Link> </Link>
@ -69,7 +69,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a <a
href="https://laravel.com/docs" href="https://laravel.com/docs"
id="docs-card" id="docs-card"
className="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]" className="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/5 transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-hidden focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
> >
<div <div
id="screenshot-container" id="screenshot-container"
@ -86,7 +86,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
alt="Laravel documentation screenshot" alt="Laravel documentation screenshot"
className="hidden aspect-video h-full w-full flex-1 rounded-[10px] object-cover object-top drop-shadow-[0px_4px_34px_rgba(0,0,0,0.25)] dark:block" className="hidden aspect-video h-full w-full flex-1 rounded-[10px] object-cover object-top drop-shadow-[0px_4px_34px_rgba(0,0,0,0.25)] dark:block"
/> />
<div className="absolute -bottom-16 -left-16 h-40 w-[calc(100%+8rem)] bg-gradient-to-b from-transparent via-white to-white dark:via-zinc-900 dark:to-zinc-900"></div> <div className="absolute -bottom-16 -left-16 h-40 w-[calc(100%+8rem)] bg-linear-to-b from-transparent via-white to-white dark:via-zinc-900 dark:to-zinc-900"></div>
</div> </div>
<div className="relative flex items-center gap-6 lg:items-end"> <div className="relative flex items-center gap-6 lg:items-end">
@ -148,7 +148,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a <a
href="https://laracasts.com" href="https://laracasts.com"
className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]" className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/5 transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-hidden focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
> >
<div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"> <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
<svg <svg
@ -195,7 +195,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a <a
href="https://laravel-news.com" href="https://laravel-news.com"
className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]" className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/5 transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-hidden focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
> >
<div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"> <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
<svg <svg
@ -242,7 +242,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
</svg> </svg>
</a> </a>
<div className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"> <div className="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/5 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800">
<div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"> <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
<svg <svg
className="size-5 sm:size-6" className="size-5 sm:size-6"
@ -267,35 +267,35 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
such as{' '} such as{' '}
<a <a
href="https://forge.laravel.com" href="https://forge.laravel.com"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]"
> >
Forge Forge
</a> </a>
,{' '} ,{' '}
<a <a
href="https://vapor.laravel.com" href="https://vapor.laravel.com"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Vapor Vapor
</a> </a>
,{' '} ,{' '}
<a <a
href="https://nova.laravel.com" href="https://nova.laravel.com"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Nova Nova
</a> </a>
,{' '} ,{' '}
<a <a
href="https://envoyer.io" href="https://envoyer.io"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Envoyer Envoyer
</a> </a>
, and{' '} , and{' '}
<a <a
href="https://herd.laravel.com" href="https://herd.laravel.com"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Herd Herd
</a>{' '} </a>{' '}
@ -304,42 +304,42 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
open source libraries like{' '} open source libraries like{' '}
<a <a
href="https://laravel.com/docs/billing" href="https://laravel.com/docs/billing"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Cashier Cashier
</a> </a>
,{' '} ,{' '}
<a <a
href="https://laravel.com/docs/dusk" href="https://laravel.com/docs/dusk"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Dusk Dusk
</a> </a>
,{' '} ,{' '}
<a <a
href="https://laravel.com/docs/broadcasting" href="https://laravel.com/docs/broadcasting"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Echo Echo
</a> </a>
,{' '} ,{' '}
<a <a
href="https://laravel.com/docs/horizon" href="https://laravel.com/docs/horizon"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Horizon Horizon
</a> </a>
,{' '} ,{' '}
<a <a
href="https://laravel.com/docs/sanctum" href="https://laravel.com/docs/sanctum"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Sanctum Sanctum
</a> </a>
,{' '} ,{' '}
<a <a
href="https://laravel.com/docs/telescope" href="https://laravel.com/docs/telescope"
className="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white" className="rounded-xs underline hover:text-black focus:outline-hidden focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
> >
Telescope Telescope
</a> </a>

View file

@ -1,7 +1,7 @@
<div id="reserve-form-container"> <div id="reserve-form-container">
<nav class="py-2 flex h-16 items-center align-items gap-x-4 bg-white px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8"> <nav class="py-2 flex h-16 items-center align-items gap-x-4 bg-white px-4 shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8">
<img class=" w-auto h-full" src="/img/logo.png" alt="logo"> <img class=" w-auto h-full" src="/img/logo.png" alt="logo">
<h1 class="fi-logo flex text-xl font-bold leading-5 tracking-tight text-gray-950 dark:text-white">vBytes</h1> <h1 class="fi-logo flex text-xl font-bold leading-5 tracking-tight text-gray-950 dark:text-white">vBytes</h1>
</nav> </nav>

View file

@ -1,22 +0,0 @@
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.jsx',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms],
};