css - Tailwindcss V4 How To Override Only Margin - Stack Overflow

admin管理员组

文章数量:1387360

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',
      }
    }
  }
}

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',
      }
    }
  }
}

• css
• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Mar 18 at 16:45 rozsazoltan 11.1k66 gold badges2020 silver badges5858 bronze badges asked Mar 18 at 16:24 starter_devstarter_dev 8133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： cssTailwindcss V4 How To Override Only MarginStack Overflow