What the base layer does: border-box everywhere, margin resets, font inheritance — and how to opt out.

Classes#

reference
js
*, ::before, ::after {
  box-sizing: border-box;
  border: 0 solid;
}

Example#

example
html
*, ::before, ::after {
  box-sizing: border-box;
  border: 0 solid;
}

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Everything is border-box: width includes padding/border
  • Disable via corePlugins.preflight if you must

concepts/class-anatomy|Class anatomy