Tailwind margin classes not working in Nuxt 3 project

[DylanD1192]

I'm working on a project using Nuxt 3 and Tailwind. I've noticed recently that some classes (specifically for margin in this case), do not work. I am applying the md:mb-28 class to an element and that is working, however if I add md:mb-24 as shown in the docs https://tailwindcss.com/docs/margin, all margin is removed and the appropriate margin is not applied. I first noticed this when developing locally and I saw that what was being shown locally looked different than the live site even though they both use the same classes and markup. Here is my tailwind.config:

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {
      screens: {
        xxl: '1792px',
      },
      colors: {
        'darkest-night': '#23263B',
        'dark-night': '#36395A',
        'dark-grey': '#DADADA',
        'light-grey': '#F5F5F9',
        'main-white': '#FEFEFE',
        'dark-blue': '#3A5AFF',
        'light-blue': '#5468FF',
      },
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        fira: ['Fira Code', 'monospace'],
      },
      gridTemplateRows: {
        custom6: 'repeat(6, minmax(100px, 180px))',
        custom4: 'repeat(4, minmax(100px, 170px))',
        custom3: 'repeat(3, minmax(100px, 180px))',
      },
      spacing: {
        '5per': '5%',
      },
    },
  },
  plugins: [],
};

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• String concatenation/interpolation is not used to build the class name.

[alex-krasikau]

Here's a general guide to make sure you have the correct setup - https://dev.to/plainsailing/tailwind-css-not-working-its-probably-this-9m4

[DaMayorG]

I am having the same problem, colors are applying but margins and padding are not applying

[bkan36]

In my case,
I solved this problem by deleting this code (which I had forgotten) from my main .scss file.

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
}

and I add this to my nuxt.config file:

tailwindcss: {
    config: {
      content: [
        "./app.vue",
        "./components/**/*.{vue,js,ts}",
        "./layouts/**/*.{vue,js,ts}",
        "./pages/**/*.{vue,js,ts}",
        "./plugins/**/*.{js,ts}",
      ],
    },
  },