Using CSS Variables

There are three ways to use CSS variables: in CSS, in the style attribute, and via Tailwind.

.selector {
  --property: value;
}

<div style="--property: value">...</div>

<div class="[--property:value]">...</div>

Choosing between each method

You’ll often find yourself using CSS variables with the style attribute because it’s convenient and usually sufficient.

For example, to build a 2-column grid, you don’t need to fish out and modify your CSS file. You can simply use the --cols variable in the style attribute.

<!-- 2-column layout -->
<div class="SimpleGrid" style="--cols: 2"> ... </div>

To create a responsive grid, you need to change the --cols variable at different breakpoints. Since you can’t use media queries in the style attribute, you’ll need to choose between CSS or Tailwind.

Using CSS

Creating a responsive grid in CSS is straightforward. Simply write a media query and change the value of the --cols variable.

<div class="SimpleGrid YourCustomGrid">...</div>

<style>
  .YourCustomGrid {
    --cols: 1;
    @media (width >= 400) { --cols: 2; }
    @media (width >= 800) { --cols: 3; }
  }
</style>

The downside to this approach is that it requires more code, so we only recommend it if the Tailwind method becomes complex or unwieldy for you.

Using Tailwind

Tailwind allows you to use CSS variables with arbitrary values. To use a CSS variable, enclose your variable and property pair with []. Then, write your CSS variable as you would in CSS, but without spaces.

<div class="[--variable:value]">...</div>

Here’s an example of how this works in practice.

<!-- 2-column layout -->
<div class="SimpleGrid [--cols:2]"> ... </div>

Here’s the best part.

Tailwind gives you the ability to change CSS at different breakpoints with their responsive variant, so you can change layouts on the fly.

Their variants take the following format:

<div class="variant:class">...</div>

To create a responsive grid, you can use built-in variants like md (for 768px) and lg (for 1024px) like this:

<!-- 1 columns on mobile, 2 columns above 768px, 3 columns above 1024px -->
<div class="SimpleGrid md:[—cols:2] lg:[--cols:3]">
  <div>...</div>
  <div>...</div>
</div>