Laravel Breeze & Blade 前端 Tailwind CSS 不支持 grid 布局的解决办法

Laravel 起步套件 Breeze & Blade 基于 Tailwind CSS，但是在实际开发过程中，使用 Tailwind CSS 的 grid 布局代码无效。

示例代码如下：

<div class="grid grid-cols-4 gap-2 mt-4 sm:grid-cols-4">
    <div>
        <label class="text-gray-700" for="username">Username</label>
        <input id="username" type="text" class="block w-full px-4 py-2">
    </div>

    <div>
        <label class="text-gray-700" for="emailAddress">Email Address</label>
        <input id="emailAddress" type="email" class="block w-full px-4 py-2">
    </div>

    <div>
        <label class="text-gray-700" for="password">Password</label>
        <input id="password" type="password" class="block w-full px-4 py-2">
    </div>

    <div>
        <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
        <input id="passwordConfirmation" type="password" class="block w-full px-4 py-2">
    </div>
</div>

正常情况下，上面的代码会显示一个带有四列输入框的表单，但是在 Laravel Breeze & Blade 环境下无效，只显示一列。

检查了一下 npm 生成的 app.css 代码，发现确实是没包含grid-cols-*相关的样式。到项目根目录的 app.css 文件看了下，发现里面只有三行代码：

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

缺少了对：@tailwind variants;的引入。加入后 grid 布局恢复正常，如果仍未恢复正常，重新运行下npm run dev即可。