TailwindCSS allows us to use pre-defined classes instead of defining our CSS styles. In this article, we will go over how we can use Custom properties (sometimes referred to as CSS variables or cascading variables) with TailwindCSS.

Setup

First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file global.css. This is the file that contains @tailwind base; etc.

global.css

First, we need to edit our TailwindCSS file so it looks something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.root,
#root,
#docs-root {
  --primary: #367ee9;
  --secondary: #a0aec0;
  --accent: #718096;
  --background: #fff;
  --main: #0d0106;
  --header: #2d3748;
}

I wrap my entire body in an element with class root or id root, so that any of my elements can access it later.

gatsby-browser.js (optional)

If you’re using Gatsby, you can add the following to your gatsby-browser.js file:

export const wrapRootElement = ({ element }) => (
  <div className="root overflow-hidden">{element}</div>
);

This will wrap all of our pages in the class root and overflow-hidden CSS class from TailwindCSS.

#tailwind-css #documentation #gatsby #css