Extending Tailwind config styles

Produkt Visit User Profile
Solved
produkt ・

Jan 30th, 2025 08:16 AM

I have extended some styles for the theme in my tailwind.config.js file:

    theme: {
        extend: {
            animation: {
                'marquee': 'marquee 25s linear infinite',
            },
            keyframes: {
                'marquee': {
                    from: { transform: 'translateX(0)' },
                    to: { transform: 'translateX(-100%)' },
                }
            },
            marginLeft: {
                'ml-16': '4.25rem'
            }
        },
    },

However, whenever I make changes to this file to update the values and re-run npm run dev or npm run build the new changes don't take effect. They are not reflected in the compiled app-.css. What am I missing here?

Report
DigitalOcean Laravel News Genesis
bobbyiliev ・

Jan 31st, 2025 12:22 AM

・

Best Answer

Hey!

Can you confirm where did you find the information for the marginLeft config?

Usually you can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file rather than marginLeft.

I've tested this that way and it works:

            spacing: {
                '16': '4.25rem',
            },

Make sure to refer to the Tailwind docs:

https://v3.tailwindcss.com/docs/theme

Report
produkt ・

Jan 31st, 2025 04:55 AM

Wow I can't believe I wasted an entire day on this. I had it set as "marginLeft" before, and thought it worked but it turns out it 16 was already a default style. Updating it to spacing indeed made it work. Thank you so much.

Report
1
bobbyiliev ・

Jan 31st, 2025 05:50 AM

No worries at all! Happy to hear that it works now!

Report