Tailwind CSS中space-x-n类不生效问题求助

刚开始学习Tailwind CSS，一整天都在排查space-x-n类不生效的原因，谷歌搜索了所有相关内容仍无解决办法。以下是我的代码、app.css及配置文件：

HTML 代码 #

<nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto">
        <div class="flex justify-between">
            <div class="flex space-x-4">
                <div>
                    <a href="#">
                        <img src="/src/logo.png" style="height:40px;" alt="logo">
                    </a>
                </div>
                <div>
                    <a href="">Features</a>
                    <a href="">Pricing</a>
                </div>
            </div>
            <div>secondary nav</div>
        </div>
    </div>
</nav>

app.css 代码 #

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

Tailwind 配置文件 #

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/Pages/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
        screens:{
            sm: '480px',
            md: '768px',
            lg: '976px',
            xl: '1440px'
        }
    },

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

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