Setting Default Border Width in Tailwind CSS v4

[hffxx]

How to configure the default border width in Tailwind CSS v4?

This is how it was configured in Tailwind CSS v3:

module.exports = { theme: { extend: { borderWidth: { DEFAULT: '1px' } } } }

[philipp-spiess]

You can do this:

@theme {
  --default-border-width: 3px;
}

https://play.tailwindcss.com/jLZbGAtAAj

[hffxx]

Thank You!

[v5zz]

how to Setting Default Border Width in tailwind.config.js， DEFAULT Not working in tailwindcss v4
// tailwind.config.js module.exports = { theme: { borderWidth: { DEFAULT: '0.5px', // set default border-width '0': '0', '2': '2px', '4': '4px', '8': '8px' }, }, };
https://play.tailwindcss.com/Loe4Z1eKky?file=config

/* output in v3 /
.border {
border-width: 0.5px
}
/ output in v4 */
.border {
border-width: 1px
}

[hffxx]

@philipp-spiess I'm trying now to override the default box-shadow color. Could you point me to documentation or tell me what's the variable name that controls the shadow color? Thanks!

[philipp-spiess]

That's part of the --shadow-* theme properties, see: https://play.tailwindcss.com/H2VKtJypTI?file=css

Here are the defaults in case you want to customize:

@theme {
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}