Tailwindcss V4 How To Override Only Margin

Question

According to v4 docs, to override existing or define new spacing (which includes margin, padding, min-w/h, etc.) you use theme namespace:

--spacing-*

So let's say I would like to define mx-max to represent:

margin-inline: 100vh;

I could achieve this by including the following theme:

@theme { --spacing-max: 100vh; }

However this also overrides a default utility, for example min-w-max:

Default: min-width: max-content; Override: min-width: 100vh;

I don't want to override other spacing utils, just margin utils. How would I achieve this, considering in previous tailwind versions you could define it in tailwind.config.js:

module.exports = { theme: { extend: { margin: { 'max': '100vh', } } } }

rozsazoltan · Accepted Answer · 2025-03-18 16:41:22Z

In @theme, only the listed namespaces exist; nothing else can be declared.

Theme variable namespaces - TailwindCSS v4 Docs
Spacing: margin - TailwindCSS v4 Docs

From v4 onwards, padding and margin have been redefined and finally equipped with dynamic calculation. This is the dynamic behavior that prompted you to ask the question, as you want to deviate from the standard. You have the option to do so by leveraging CSS features, allowing you to declare a stronger utility.

@layer utilities { .mx-max { margin-inline: 100vh; } }

From v4 onwards, this can be written using the @utility directive, as recommended in the documentation:

Adding custom utilities - TailwindCSS v3 to v4 Upgrade Docs
@utility directive - TailwindCSS v4 Docs

@utility mx-max { margin-inline: 100vh; }

TailwindCSS v4 Playground

Collectives™ on Stack Overflow

Tailwindcss V4 How To Override Only Margin

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related