Base Styles
An opinionated set of base styles for Tailwind projects.
Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.
Tailwind automatically injects these styles when you include @tailwind base
in your CSS:
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;
While most of the styles in Preflight are meant to go unnoticed — they simply make things behave more like you’d expect them to — some are more opinionated and can be surprising when you first encounter them.
For a complete reference of all the styles applied by Preflight, see the stylesheet.
Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale.
All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
The reason for this is two-fold:
You can always add default header styles to your project by adding your own base styles.
If you’d like to selectively introduce sensible default heading styles into article-style parts of a page, we recommend the @tailwindcss/typography plugin.
Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
If you’d like to style a list, you can do so using the list-style-type and list-style-position utilities:
<ul class="list-disc list-inside">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
You can always add default list styles to your project by adding your own base styles.
If you’d like to selectively introduce default list styles into article-style parts of a page, we recommend the @tailwindcss/typography plugin.
Unstyled lists are not announced as lists by VoiceOver. If your content is truly a list but you would like to keep it unstyled, add a “list” role to the element:
<ul role="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Images and other replaced elements (like svg
, video
, canvas
, and others) are display: block
by default.
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
This helps to avoid unexpected alignment issues that you often run into using the browser default of display: inline
.
If you ever need to make one of these elements inline
instead of block
, simply use the inline
utility:
<img class="inline" src="..." alt="...">
In order to make it easy to add a border by simply adding the border
class, Tailwind overrides the default border styles for all elements with the following rules:
*,
::before,
::after {
border-width: 0;
border-style: solid;
border-color: theme('borderColor.DEFAULT', currentColor);
}
Since the border
class only sets the border-width
property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color.
This can cause some unexpected results when integrating certain third-party libraries, like Google maps for example.
When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS:
.google-map * {
border-style: none;
}
To ensure that we provide accessible styles out of the box, we made sure
that buttons have a default outline. You can of course override this by
applying focus:ring
or similar utilities to your buttons.
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
If you’d like to add your own base styles on top of Preflight, simply add them to your CSS within a @layer base
directive:
@tailwind base;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
a {
@apply text-blue-600 underline;
}
}
@tailwind components;
@tailwind utilities;
Learn more in the adding base styles documentation.
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight
to false
in the corePlugins
section of your tailwind.config.js
file:
module.exports = {
corePlugins: {
preflight: false,
}
}