Laravel 11+Inertia.js项目中Tailwind CSS类不生效问题求助

在Laravel 11、Inertia.js 1.2、Vue.js 3的新项目中，参照Tailwind CSS官方安装文档配置后，发现Tailwind类无法生效，以下是完整配置详情，恳请帮忙排查问题。

配置文件详情 #

resources/views/app.blade.php #

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js', 'resources/css/app.css')
    @inertiaHead
</head>

resources/css/app.css #

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

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

tailwind.config.js #

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',
    ],

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

    plugins: [forms],
};

resources/js/app.js #

import './bootstrap';
import '../css/app.css';

疑问点 #

不确定是否需要执行命令：

npx tailwindcss -i ./resources/css/app.css --watch

该命令参数是否正确？但无论是否执行，Tailwind类都无法生效。

项目及依赖版本 #

后端项目版本 #

"php": "^8.2",
"inertiajs/inertia-laravel": "^1.3",
"laravel/framework": "^11.9"

前端依赖版本 #

"devDependencies": {
    "axios": "^1.6.4",
    "laravel-vite-plugin": "^1.0",
    "tailwindcss": "^3.4.8",
    "vite": "^5.0"
},
"dependencies": {
    "@inertiajs/vue3": "^1.2.0",
    "@vitejs/plugin-vue": "^5.1.2",
    "vue": "^3.4.36"
}

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