Can't extend spacing on Tailwind

Question

I'm trying to extend the spacing on Tailwind, but I can't make it work. I did my research and I made the changes in the tailwind.config.js, but when I use the class in the HTML, it doesn't exist.

PS: I understand that there is no need to run the build

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      spacing: {
        '1/3': '33,333333%',
        '2/3': '66,666667%'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

user_6126373 · Answer

I've just checked your config and it does create all the classes. The problem is that 33,333333% and 66,666667% are not valid CSS values.

Unlike in Spanish, you have to use decimal points, not commas:

theme: {
  extend: {
    spacing: {
      '1/3': '33.333333%',
      '2/3': '66.666667%',
    },
  },
},

33,333333% is an invalid property value:

33.333333% works fine:

Codesandbox link

Can't extend spacing on Tailwind

1 Answers