Laravel 8安装Jetstream后登录注册页面样式显示异常如何解决

问题现象 #

按照官方文档步骤在全新 Laravel 8 项目中安装 Jetstream 后，登录、注册页面无法正常渲染，页面样式完全丢失，效果如下：

问题原因 #

当前tailwind.config.js配置存在语法错误：

• 配置开头混入了多余的反引号
• 配置的闭合大括号错位，写在了代码块外部，导致 Tailwind 编译流程完全失效
  错误配置示例如下：

const defaultTheme = require('tailwindcss/defaultTheme');
`/** @type {import('tailwindcss').Config} */
 module.exports = {
content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],

theme: {
    extend: {
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        },
    },
},

plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
// 闭合大括号}被错误写在了代码块外部

修复步骤 #

• 修正tailwind.config.js配置，删除多余符号、调整大括号位置，替换为以下正确内容：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

• 安装项目前端依赖，在项目根目录执行命令：npm install
• 编译前端资源：本地调试执行npm run dev，部署上线执行npm run prod
• 清除Laravel视图缓存避免旧缓存影响：执行php artisan view:clear

注意：Laravel 8 适配的 Jetstream 版本默认基于 Tailwind CSS 2.x，不要手动升级 Tailwind 到 3.x 版本，否则会出现兼容性问题导致样式失效。

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