Laravel 8 Jetstream的Login.blade.php与Register.blade.php页面显示异常问题求助

Hey there! Let's get that broken login/register page sorted out. It sounds like your Jetstream auth views lost their proper styling—logo way too big, form stuck in the bottom-left. Here are practical steps to fix this:

1. Adjust the Auth View Components Directly #

First, make sure you've published Jetstream's view files so you can edit them (if you haven't already):

php artisan vendor:publish --tag=jetstream-views

Now head to resources/views/auth/login.blade.php and resources/views/auth/register.blade.php:

• Resize & Center the Logo: Look for the application logo component (usually <x-application-logo>). Add Tailwind classes to control its size and center it:

  <x-application-logo class="w-24 h-24 mx-auto mb-6" />
  

• Center the Form Container: Ensure the form is wrapped in a container that centers it vertically and horizontally. Jetstream's default uses this structure—double-check it's intact:

  <div class="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full space-y-8">
          <!-- Logo, form, and other content go here -->
      </div>
  </div>
  

  The flex items-center justify-center classes are what keep the form centered on the page.

2. Fix Tailwind CSS Compilation #

Sometimes Tailwind isn't picking up Jetstream's classes correctly, leading to missing styles:

• Open your tailwind.config.js and confirm it includes Jetstream's view paths:

  content: [
      './vendor/laravel/jetstream/**/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
  ],
  

• Recompile your CSS to apply the changes:

  npm run dev
  

3. Check for Custom CSS Conflicts #

If you've added custom styles to your app, they might be overriding Jetstream's default layout:

• Use your browser's dev tools (right-click → Inspect) to check the logo and form elements. Look for unwanted styles like width: 100% on the logo, or position: absolute on the form container that's pushing it to the corner.
• Temporarily disable your custom CSS files to see if the layout fixes itself—this will help you pinpoint the conflicting code.

4. Reset Jetstream Views (As a Last Resort) #

If you've modified the auth views and can't track down the issue, you can republish the default views to start fresh:

php artisan vendor:publish --tag=jetstream-views --force

⚠️ Note: This will overwrite any custom changes you've made to Jetstream's auth views, so back up your edits first!

If none of these steps work, double-check that your Laravel and Jetstream versions are compatible (Jetstream has specific version requirements for Laravel).

内容的提问来源于stack exchange，提问作者thdynh