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',
}
}
}
}
In @theme, only the listed namespaces exist; nothing else can be declared.
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:
@utility directive - TailwindCSS v4 Docs@utility mx-max {
margin-inline: 100vh;
}