Elements CSS is a collection of CSS variables that extend TailwindCSS theme with semantic variables for Elements Design System.
pnpm add -D @qctrl/elements-css@latest tailwindcss@latest @tailwindcss/postcss@latest
For most projects, we recommend setting up TailwindCSS and Elements with PostCSS.
https://tailwindcss.com/docs/installation/using-postcss
@import "tailwindcss";
@import "@qctrl/elements-css";
Note: You can also import individual CSS files if you need to omit/override some properties.
@import "tailwindcss";
@import "@qctrl/elements-css/theme/color.css";
@import "@qctrl/elements-css/theme/font.css";
@import "@qctrl/elements-css/theme/typography.css";
/** ... */
For development purposes, you can import both semantic and primitive variables in JSON format:
import semanticVariables from "@qctrl/elements-css/figma/semantic-variables.json";
import primitiveVariables from "@qctrl/elements-css/figma/primitive-variables.json";