p-2, p-4, p-5 working but nothing else

[flazouh]

I'm using React + Esbuild.
Any idea what would the problem be ? My config is :

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    theme: {
        fontSize: {
            sm: ['14px', '20px'],
            base: ['16px', '24px'],
            lg: ['20px', '28px'],
            xl: ['24px', '32px']
        },
        borderRadius: {
            sm: '2.5px',
            base: '5px',
            lg: '10px',
            xl: '20px'
        },
        colors: {
            green: '#a1d4a3',
            red: '#df4c3d',
            black: '#000000',
            blue: '#77B8F0FF',
            'link-blue': '#38a9ff',
            'midnight-blue': '#323844',
            'midnight-blue-darker': '#292d38',
            grey: '#2E2E2FFF',
            'apple-grey': '#2B2C2EFF',
            'hovered-grey': '#3a3a3f',
            'hovered-green': '#749d75',
            'hovered-red': '#b14c46',
            'hovered-blue': '#4e8bb2',
            white: '#FFFFFF',
            'hovered-white': '#d9d9d9',
            purple: '#8E44AD',
            'hovered-purple': '#6c2f7a',
            'hovered-yellow': '#b49a5f',
            'hovered-orange': '#b46f3f',
            'hovered-midnight-blue': '#383e4d',
            orange: '#d6bb81',
            yellow: '#FFE94BFF'
        }
    },
    variants: {
        extend: {
            backgroundColor: ['hover']
        }
    },
    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.
• The class name would resolve to a Tailwind class that Tailwind would generate a rule for.
• You are not using string interpolation or concatenation to build class name strings.

[dandaniel5]

same tailwind 4, next 15

`@import "tailwindcss";
@import "tw-animate-css";
@plugin 'tailwind-scrollbar';
@plugin "tailwindcss-react-aria-components";

@theme {
--color-tg-bg: var(--tg-theme-bg-color);
--color-tg-secondary-bg: var(--tg-theme-secondary-bg-color);
--color-tg-text: var(--tg-theme-text-color);
--color-tg-accent-text: var(--tg-theme-accent-text-color);
--color-tg-hint: var(--tg-theme-hint-color);
--color-tg-link: var(--tg-theme-link-color);
--color-tg-button: var(--tg-theme-button-color);
--color-tg-button-text: var(--tg-theme-button-text-color);
--color-tg-header-bg: var(--tg-theme-header-bg-color);
--color-tg-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color);
--color-tg-section-bg: var(--tg-theme-section-bg-color);
--color-tg-section-separator: var(--tg-theme-section-separator-color);
--color-tg-section-header-text: var(--tg-theme-section-header-text-color);
--color-tg-subtitle-text: var(--tg-theme-subtitle-text-color);
--color-tg-subtitle-destructive-text: var(--tg-theme-destructive-text-color);
}`

It’s weird — pb-16 works, but p-16 does not.
pb-24 doesn’t work either, and p-16 still doesn’t.
p-8 works, but p-[**] does not.

I need help — I’m really struggling to build an app like this.

[wongjn]

Consider checking:

• Tailwind has compiled since you added the classes.
• You have run git init in the root of the project.
• String concatenation/interpolation is not used to build the class name.

Otherwise, consider providing a project that reproduces the unexpected behavior.