Tailwind:Base
lastmod 2023-03-09created 2023-03-095 edits
Base (or global) styles are the styles at the beginning of a stylesheet that set useful defaults for basic HTML elements like <a> tags, headings, etc. or apply opinionated resets like the popular box-sizing reset.
Tailwind includes a useful set of out-of-the-box base styles that we call Preflight, which is really just normalize.css plus a thin layer of additional more opinionated styles.
Preflight is a great starting point for most projects, but if you'd like to add your own additional base styles, here are some recommendations for doing it idiomatically.
Using classes in your HTML
If you just want to apply some global styling to the html or body elements, consider just adding existing classes to those elements in your HTML instead of writing new CSS:
<!doctype html>
<html lang="en" class="text-gray-900 antialiased leading-tight">
<!-- ... -->
<body class="min-h-screen bg-gray-100">
<!-- ... -->
</body>
</html>
Using CSS
If you want to apply some base styles to specific elements, the easiest way is to just add them to your CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}