Spacing is not working for me in Tailwind css-CodePudding

I just started learning Tailwind CSS, all day long I'm trying to understand why space-x-n not working for me I searched everywhere on Google but no luck

this is my code:

<nav >
    <div >
        <div >
            <div >
                <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>

this is my app.css

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

config file

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

CodePudding user response：

Inspect your generated markup and if there's no space-x-4, there might be an error in your build step. It's also possible that this file isn't part of the configured tailwind content files.

You're markup looks correct. Both gap-x-4 and space-x-4 should provide a 16px gap between the two contained divs.

You can give the first div containing the logo a mr-4 margin as workaround.

See https://tailwindcss.com/docs/gap#changing-row-and-column-gaps-independently