Tailwind space-x-# does not apply any styles - tailwind-css

Question

I have the following:
<div class="flex flex-row items-center justify-start flex-nowrap space-x-6">
<div>hello</div>
<div>world</div>
</div>
Now the there is no space-x-6 applied between the items. However when I try this in the Tailwind playground it works. Any ideas?
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
animation: {
blob: 'blob 7s infinite',
},
keyframes: {
blob: {
'0%': {
transform: 'translate(0px, 0px) scale(1)',
},
'33%': {
transform: 'translate(30px, -50px) scale(1.1)',
},
'66%': {
transform: 'translate(-20px, 20px) scale(0.9)',
},
'100%': {
transform: 'tranlate(0px, 0px) scale(1)',
},
},
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
mono: ['iAWriter Mono', ...defaultTheme.fontFamily.mono],
},
boxShadow: {
card: '0 0 0.5rem rgba(0, 0, 0, 0.075)',
},
typography: (theme) => ({
DEFAULT: {
css: {
whiteSpace: 'pre-wrap',
figcaption: {
textAlign: 'center',
},
strong: {
fontWeight: theme('fontWeight.medium'),
},
// Image margin is handled by `figure`
img: {
marginTop: null,
marginBottom: null,
borderRadius: theme('borderRadius.lg'),
},
blockquote: {
borderLeftWidth: '2px',
fontStyle: null,
fontWeight: theme('fontWeight.normal'),
borderColor: theme('colors.blue.600'),
},
hr: {
borderTopWidth: '2px',
maxWidth: '12rem',
marginLeft: 'auto',
marginRight: 'auto',
},
'blockquote p:first-of-type::before, blockquote p:last-of-type::after': {
content: 'unset !important',
},
a: {
color: theme('colors.blue.600'),
wordWrap: 'break-word',
fontWeight: theme('fontWeight.normal'),
textDecoration: 'none',
textUnderlineOffset: '0.2em',
'&:hover': {
textDecoration: 'underline',
},
},
'ol > li::before': {
fontFamily: theme('fontFamily.mono').join(', '),
color: theme('colors.gray.400'),
},
'ul > li::before': {
backgroundColor: theme('colors.gray.400'),
},
'.twitter-tweet': {
marginLeft: 'auto',
marginRight: 'auto',
},
code: {
fontWeight: theme('fontWeight.normal'),
background: theme('colors.gray.200'),
color: theme('colors.gray.600'),
borderRadius: theme('borderRadius.lg'),
padding: `0.125rem ${theme('padding.1')}`,
'&::before, &::after': {
content: 'unset !important',
},
},
'[data-nft] *, .opengraph *, .opengraph *:hover': {
margin: '0',
textDecoration: 'none',
borderRadius: 'unset',
},
},
},
lg: {
css: {
'ol > li, ul > li': {
marginTop: '0',
marginBottom: '0',
},
// Image margin is handled by `figure`
img: {
marginTop: null,
marginBottom: null,
},
},
},
}),
},
},
plugins: [require('#tailwindcss/typography'), require('#tailwindcss/line-clamp'), require('#tailwindcss/forms')],
};
UPDATE:
So for the space-x-# class I do a little fancyness:
export function getSpacing(spacing, direction) {
const spacingTailwindClasses = [];
if (typeof direction === 'string') {
spacingTailwindClasses.push(getTailwindSpacingClassname(spacing, direction));
} else {
spacingTailwindClasses.push(getTailwindSpacingClassname(spacing, direction.sOnly || direction.sUp));
if (direction.sUp) {
spacingTailwindClasses.push(`sm:${getTailwindSpacingClassname(spacing, direction.sUp)}`);
if (direction.sOnly) {
spacingTailwindClasses.push(`sm:${getTailwindSpacingClassname('none', direction.sOnly)}`);
}
}
}
const spacingObject = {};
const classes = spacingTailwindClasses.join(' ');
spacingObject[classes] = true;
return spacingObject;
}