Dynamic values in Tailwind

When working with Tailwind CSS, there are instances where you may need to use dynamic values, such as data fetched from the backend or calculations performed within your code.

In these scenarios, you might initially consider using arbitrary values:

function Content() {
  return <main className="h-[calc(100%_-_64px)]"></main>;
}

In the example above, the 64px value is arbitrary and stands alone—it isn't tied to any external variable. However, be wary of directly interpolating JavaScript variables within class names, as Tailwind CSS documentation advises against it.

A clearer and more maintainable approach is to utilize CSS variables:

function Content() {
  return (
    <main
      style={{ "--header-height": "64px" }}
      className="h-[calc(100%_-_var(--header-height))]"
    ></main>
  );
}

For an even more abstracted method:

function Content() {
  return (
    <main
      style={{
        "--header-height": "64px",
        "--main-height": "calc(100% - var(--header-height))",
      }}
      className="h-[var(--main-height)]"
    ></main>
  );
}

You can also use the same technique to represent values from the backend. This gives us the extra advantage of using modifiers like md: or hover: which isn't possible using inline styles. Taking an example out of the Tailwind blog:

export function MyComponent({ company }) {
  return (
    <div
      style={{
        "--brand-color": company.brandColor,
        "--brand-hover-color": company.brandHoverColor,
      }}
      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"
    />
  );
}