CODEWITHSUNDEEP
tailwind-csstailwind-uitailwind-css-4tailwind-elements
Zayd
Zayd

Reputation: 51

Issues with padding, margin, and space utilities not working in Tailwind CSS

In my first Tailwind project, the padding and margin utilities worked fine. However, in subsequent projects, these utilities stopped working as expected, and I had to use regular CSS instead. I'm not sure why they're not applying anymore in these newer projects.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn-nav {
  padding-block: 8px;
  padding-inline: 24px;
}

/*****/

nav.container {
  padding: 24px;
  margin-inline: auto;
}

.navbar a {
  /* margin-right: 24px; */
  margin-inline-end: 24px;
}

.navbar a:last-child {
  /* margin-right: 0; */
  margin-inline-end: 0;
}
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<nav class="container mx-auto p-6">
  <div class="flex items-center justify-between">
    <div>
      <img src="./imgs/Tailwind_LightBG_logo.svg.png" alt="logo tailwind" width="200px">
    </div>
    <div class="navbar hidden md:flex space-x-6 items-center">
      <a href="#" class="text-slate-900 hover:text-slate-500">Portfolio</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">About</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">Contact</a>
      <a href="#" class="text-slate-900 hover:text-slate-500">Social</a>
      <a href="#" class="btn-nav rounded-full py-2 px-6 text-white bg-orange-500 transition-all duration-500 ease-in-out hover:bg-slate-900">Call Me</a>
    </div>
    <div id="mobile-btn" class="md:hidden">
      <i class="ri-menu-line text-2xl"></i>
    </div>
  </div>

I've tried using the standard Tailwind padding and margin utilities like p-4, m-2, space-x-4, and space-y-4 in my HTML. In my first project, these worked perfectly, but in my subsequent projects, they don't seem to apply any styles. I expected that the spacing utilities would be applied correctly, but the elements are not spaced as intended. Instead, I have to manually write the styles in a separate CSS file to get the expected result.

Upvotes: 0

Views: 296

Answers (2)

Md Nayem
Md Nayem

Reputation: 1

I think you are facing this problem just because of your default styling inside your style.css like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

In Tailwind v4 you need to use this default styling inside @layer base{ }. Put all the default styles inside the Tailwind base layer.

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
}

Upvotes: 0

Susmit Ullas
Susmit Ullas

Reputation: 11

With tailwindcss v4 release there have been some changes to the configuration, if you have properly done the upgrade steps from https://tailwindcss.com/docs/upgrade-guide then the issue of margin and padding not working can be fixed by moving reset styles into @layer base which was answered in the tailwind discussions https://github.com/tailwindlabs/tailwindcss/discussions/15728, here is the code example of input.css:

@import "tailwindcss";

@layer base {
    *,
    *::before,
    *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* For Firefox. */
    * {
        scrollbar-width: none;
    }

    /* For WebKit (Chrome & Safari). */
    ::-webkit-scrollbar {
        display: none;
    }
}

Upvotes: 1

Related Questions