在 Tailwind css 中，间距对我不起作用

我刚刚开始学习TailWind CSS，一整天我都在试图理解为什么space-x-n不适合我 我在谷歌上到处搜索，但都没找到

这是我的代码:

<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;

配置文件

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')],
};