CODEWITHSUNDEEP
csstailwind-css
user20718909
user20718909

Reputation:

Spacing is not working for me in Tailwind css

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

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

Upvotes: 6

Views: 11388

Answers (3)

Gian Ramirez
Gian Ramirez

Reputation: 199

For anyone else, if your tailwind classes are not working, check that your folder is included in the content array on your tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/containers/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

Upvotes: 0

Salah_kai
Salah_kai

Reputation: 31

For the ones who still have this issue, As @andreas mentioned, just past your code here, and check if it's working, if yes, probably you have a compilation problem, other classes may still work since they are already available in the output file.

possible solutions :

  1. Make sure your dev server is working and -watching.
  2. Clear server cache.
  3. Verify the config file ( content prop )

Upvotes: 2

andreas
andreas

Reputation: 16946

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

Upvotes: 3

Related Questions