css

Create CSS classes with theme tokens

Usage

import { css } from "./theme";

const buttonClass = css({
  padding: "$medium $large",
  backgroundColor: "$primary",
  color: "$background",
  "&:hover": {
    opacity: 0.9,
  },
});
Copy

With Media Queries

const responsiveClass = css({
  padding: "$small",
  mobile: {
    padding: "$medium",
  },
  desktop: {
    padding: "$large",
  },
});
Copy

Dynamic Classes

const dynamicClass = css({
  backgroundColor: "$background",
  color: "$text",
});
Copy

Returns

Returns a string containing the generated CSS class name. Use this class name in your JSX:

const buttonClass = css({ padding: "$medium" });

<button className={buttonClass}>Click me</button>
Copy