Tailwind ignores my extend spacing

[bojandurmic]

Hi everyone,

I have been stuck with this for so long. I'm using TailwindCSS with default Nuxt.js config. Everything seems to be working fine, I can add my own colors, customize the container div. It doesn't allow me to extend spacing to add my own custom spacing utilities.

This is my entire Tailwind config file:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ]
  },
  theme: {
    fontFamily: {
      app: ["'Titillium Web'", 'sans-serif']
    },
    container: {
      center: true,
      padding: '1.5rem'
    },
    extend: {
      spacing: {
        'custom': '15rem'
      },
      colors: {
        'emb': {
          'blue': '#021968',
          'grey': '#5A5A5A',
          'grey-light': '#FAFAFA'
        },
      }
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

So, the issue is, Tailwind is not creating the px-custom and similar utilities.

Thanks ahead.

[simonswiss]

Hey! 👋

Are you able to share your setup in a GitHub repo? There must be something wrong somewhere. I have just copied your config file above in a new project (not Nuxt, but I'd like to look at your setup). It generated the px-custom class for me, as well as all other expected (211 😅) utility classes.

Are you maybe accidentally looking at your side with NODE_ENV=production, and the spacing classes are not present in your templates, and therefore purged?

Side note: speaking of NODE_ENV, your enabled rule for purge (only run if NODE_ENV === 'production' is the default behaviour, so you technically don't need to define that.

If you share your project (or a minimal repro) in a repo, I'll have a look for you 👍

[bojandurmic]

Hey Simon,

Thank you for an incredibly quick reply.

The problem seems to have been magically fixed. For an hour or so it refused to add my custom borderRadius and spacing utilities. Then, after furiously typing npm run dev and clearing my cache like a maniac, it started working.

I have no idea what went wrong or how it got fixed, but I am happy that everything is working as it should.

I just want to thank you for being so helpful, Tailwind team is amazing. I'm glad I purchased TailwindUI and will surely purchase any product which comes from you.

Consider this issue solved.

[simonswiss]

Hehe, happy it's resolved, even if not sure why 😅

Thank you so much for your kind words - means a lot! 🤗