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 base styles out of the box 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 ever like to add your own additional base styles, here are some recommendations for doing it idiomatically.
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>
If you want to apply some base styles to specific elements, the easiest way is to simply add them in your CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
h2 {
@apply text-xl;
}
By using the
@layer
directive, Tailwind will automatically move those styles to the same place as
@tailwind base
to avoid unintended specificity issues.
Using the
@layer
directive will also instruct Tailwind to consider those styles for purging when purging the
base
layer. Read our
Controlling File Size
documentation for more details.
It's a good idea to use
@apply
or
theme()
to define these styles to avoid introducing new magic values or accidentally deviating from your design system.
You can use the same approach to add your
@font-face
rules for any custom fonts you are using:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: Proxima Nova;
font-weight: 400;
src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
@font-face {
font-family: Proxima Nova;
font-weight: 500;
src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}
You can also add base styles by
writing a plugin
and using the
addBase
function:
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, config }) {
addBase({
'h1': { fontSize: config('theme.fontSize.2xl') },
