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

2215
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",
"@inertiajs/react": "^2.0.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/postcss": "^4.3.0",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.12",
"axios": "^1.7.4",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.2.1",
"tailwindcss": "^4.3.0",
"vite": "^6.0"
}
}

View file

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

View file

@ -1,7 +1,33 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@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 {
max-width: 1400px !important;

View file

@ -4,7 +4,7 @@ export default function Checkbox({ className = '', ...props }) {
{...props}
type="checkbox"
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
}
/>

View file

@ -8,7 +8,7 @@ export default function DangerButton({
<button
{...props}
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'
} ` + className
}

View file

@ -46,9 +46,9 @@ const Content = ({
let alignmentClasses = 'origin-top';
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') {
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 = '';
@ -91,7 +91,7 @@ const DropdownLink = ({ className = '', children, ...props }) => {
<Link
{...props}
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
}
>

View file

@ -10,7 +10,7 @@ export default function NavLink({
<Link
{...props}
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
? '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') +

View file

@ -8,7 +8,7 @@ export default function PrimaryButton({
<button
{...props}
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'
} ` + className
}

View file

@ -13,7 +13,7 @@ export default function ResponsiveNavLink({
active
? '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'
} 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}
</Link>

View file

@ -10,7 +10,7 @@ export default function SecondaryButton({
{...props}
type={type}
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'
} ` + className
}

View file

@ -21,7 +21,7 @@ export default forwardRef(function TextInput(
{...props}
type={type}
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
}
ref={localRef}

View file

@ -40,7 +40,7 @@ export default function AuthenticatedLayout({ header, children }) {
<span className="inline-flex rounded-md">
<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}
@ -85,7 +85,7 @@ export default function AuthenticatedLayout({ header, children }) {
(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
className="h-6 w-6"
@ -163,7 +163,7 @@ export default function AuthenticatedLayout({ header, children }) {
</nav>
{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">
{header}
</div>

View file

@ -84,7 +84,7 @@ export default function Login({ status, canResetPassword }) {
{canResetPassword && (
<Link
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?
</Link>

View file

@ -105,7 +105,7 @@ export default function Register() {
<div className="mt-4 flex items-center justify-end">
<Link
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?
</Link>

View file

@ -39,7 +39,7 @@ export default function VerifyEmail({ status }) {
href={route('logout')}
method="post"
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
</Link>

View file

@ -14,7 +14,7 @@ export default function Dashboard() {
<div className="py-12">
<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">
You're logged in!
</div>

View file

@ -17,7 +17,7 @@ export default function Edit({ mustVerifyEmail, status }) {
<div className="py-12">
<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
mustVerifyEmail={mustVerifyEmail}
status={status}
@ -25,11 +25,11 @@ export default function Edit({ mustVerifyEmail, status }) {
/>
</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" />
</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" />
</div>
</div>

View file

@ -77,7 +77,7 @@ export default function UpdateProfileInformation({
href={route('verification.send')}
method="post"
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.
</Link>

View file

@ -4,12 +4,12 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
const handleImageError = () => {
document
.getElementById('screenshot-container')
?.classList.add('!hidden');
document.getElementById('docs-card')?.classList.add('!row-span-1');
?.classList.add('hidden!');
document.getElementById('docs-card')?.classList.add('row-span-1!');
document
.getElementById('docs-card-content')
?.classList.add('!flex-row');
document.getElementById('background')?.classList.add('!hidden');
?.classList.add('flex-row!');
document.getElementById('background')?.classList.add('hidden!');
};
return (
@ -41,7 +41,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
{auth.user ? (
<Link
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
</Link>
@ -49,13 +49,13 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<>
<Link
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
</Link>
<Link
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
</Link>
@ -69,7 +69,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a
href="https://laravel.com/docs"
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
id="screenshot-container"
@ -86,7 +86,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
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"
/>
<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 className="relative flex items-center gap-6 lg:items-end">
@ -148,7 +148,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a
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">
<svg
@ -195,7 +195,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
<a
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">
<svg
@ -242,7 +242,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
</svg>
</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">
<svg
className="size-5 sm:size-6"
@ -267,35 +267,35 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
such as{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>
, and{' '}
<a
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
</a>{' '}
@ -304,42 +304,42 @@ export default function Welcome({ auth, laravelVersion, phpVersion }) {
open source libraries like{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>
,{' '}
<a
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
</a>

View file

@ -1,7 +1,7 @@
<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">
<h1 class="fi-logo flex text-xl font-bold leading-5 tracking-tight text-gray-950 dark:text-white">vBytes</h1>
</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],
};