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="/@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>

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/@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.

• tailwind-css
• tailwind-ui
• tailwind-css-4
• tailwind-elements

• The way the question tag is listed is a bit funny; so, is it TailwindCSS v3 or v4? – rozsazoltan Commented Feb 16 at 15:11
• TailwindCSS v4 @rozsazoltan – Zayd Commented Feb 16 at 18:39
• Turning your code into a snippet and linking to tailwind 4.0.6 seems to work fine without your adding regular CSS . – G-Cyrillus Commented Feb 16 at 22:31
• can you explain please, i use the latest version of Tailwind @G-Cyrillus – Zayd Commented Feb 16 at 22:37
• @Zayd if you run the snippet with or without the CSS you manually added, it makes no difference. I do not see your issue or I misunderstood your question :) – G-Cyrillus Commented Feb 16 at 23:10

1 Answer 1

With tailwindcss v4 release there have been some changes to the configuration, if you have properly done the upgrade steps from https://tailwindcss/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/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;
    }
}