Q-CTRL Elements CSS

Elements CSS is a collection of CSS variables that extend TailwindCSS theme with semantic variables for Elements Design System.

Installation guide

Install Elements CSS and its peer dependencies

  pnpm add -D @qctrl/elements-css@latest tailwindcss@latest @tailwindcss/postcss@latest

Follow TailwindCSS setup steps

For most projects, we recommend setting up TailwindCSS and Elements with PostCSS.

https://tailwindcss.com/docs/installation/using-postcss

Import Elements CSS into your main css file

@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";
/** ... */

Figma variables

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";