Adding Global Base Styles on Top of Tailwind CSS

By Hemanta Sundaray on 2021-11-27

Tailwind includes a useful set of base styles out of the box. In addition, if you want to add some global styling, say to the html or body elements, you can do so as shown below:

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gray-50;
  }
}

The code snippet above will add a light gray background color to the body element.

Learn how to extract common utility classes into custom CSS classes using the @apply directive in my blog post here.

Join the Newsletter