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

0

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

answered Mar 18 at 16:41

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwindcss V4 How To Override Only Margin

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related