How to add box-sizing: border-box to all HTML elements using TailwindCSS

box-border (Tailwind) is the equivalent to box-sizing: border-box; (CSS).

If you want to apply this style to all your elements, you should use @layer base in your main.css. This way you apply styles to specific elements, it's mostly used for elements such as h1 and p but it should work the same way with *.

Here's the part in the documentation explaining it: link.

main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply box-border;
  } 
}

Tailwind already has such stylings in preflight - see compiled stylesheet.

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
}

So there is no need to add it unless you've disabled preflights.

However Tailwind's equivalent class name will be border-box - see here