Adding Base Styles

Best practices for adding your own global base styles on top of Tailwind.

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.

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:

  1. <!doctype html>
  2. <html lang="en" class="text-gray-900 antialiased leading-tight">
  3.   <!-- ... -->
  4.   <body class="min-h-screen bg-gray-100">
  5.     <!-- ... -->
  6.   </body>
  7. </html>

Using CSS

If you want to apply some base styles to specific elements, the easiest way is to simply add them in your CSS.

Define any of your own custom base styles directly after @tailwind base and before @tailwind components to avoid specificity issues:

  1. @tailwind base;
  3. h1 {
  4.   @apply text-2xl;
  5. }
  6. h2 {
  7.   @apply text-xl;
  8. }
  9. h3 {
  10.   @apply text-lg;
  11. }
  12. a {
  13.   @apply text-blue-600 underline;
  14. }
  16. @tailwind components;
  18. @tailwind utilities;

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.

@font-face rules

You can use the same approach to add your @font-face rules for any custom fonts you are using:

  1. @tailwind base;
  3. @font-face {
  4.   font-family: Proxima Nova;
  5.   font-weight: 400;
  6.   src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  7. }
  8. @font-face {
  9.   font-family: Proxima Nova;
  10.   font-weight: 500;
  11.   src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  12. }
  14. @tailwind components;
  16. @tailwind utilities;

Using a plugin

You can also add base styles by writing a plugin and using the addBase function:

  1. // tailwind.config.js
  2. module.exports = {
  3.   plugins: [
  4.     function({ addBase, config }) {
  5.       addBase({
  6.         'h1': { fontSize: config('theme.fontSize.2xl') },
  7.         'h2': { fontSize: config('theme.fontSize.xl') },
  8.         'h3': { fontSize: config('theme.fontSize.lg') },
  9.       })
  10.     },
  11.   ]
  12. }

Any styles you added using addBase will automatically be included in your @tailwind base styles.

When to use a plugin

In general, it’s simpler to add base styles to your project in CSS than it is to write a plugin.

You should prefer a plugin if:

  • You want to publish your base styles publicly and make them easy for other users to install.
  • You want to re-use your base styles across multiple projects in your company and prefer sharing JS dependencies instead of CSS dependencies.