# Prefer Tailwind Over Custom CSS Variables

Use Tailwind utilities instead of custom CSS variables.

```liquid
{% comment %} BAD {% endcomment %}
<style>--card-padding: 1rem;</style>
<div class="card">

{% comment %} GOOD {% endcomment %}
<div class="p-16">
```

Only use CSS variables for:

- Dynamic values from CMS settings
- Theme-wide color schemes
- Complex calculations not expressible with utilities

When necessary, scope to section ID:

```liquid
{%- if section.settings.background_color != blank -%}
  <style>
    #section-{{ section.id }} {
      --section-bg: {{ section.settings.background_color }};
    }
  </style>
{%- endif -%}
```