CSS Variables

If you’ve chosen to use Tailwind, you can write CSS variables in three ways:

1. Tailwind arbitrary values
2. Inline styles
3. Use them normally in CSS

<div class="grid-simple [--cols:2]">...</div>

<div class="grid-simple" style="--cols: 2">...</div>

.selector {
  @apply grid-simple;
  --cols: 2;
}

The best method

The best methods are #1 and #3 — depending on your use case and preference. Never use #2 because Tailwind utilities are better than inline styles.

I recommend the following:

• Use #1 if your layout is simple
• Use #3 if your layout is complex or reusable