# Q-CTRL Elements CSS

Elements CSS is a collection of CSS variables that extend [TailwindCSS](https://tailwindcss.com/) theme with semantic variables for Elements Design System.

## Installation guide

### Install Elements CSS and its peer dependencies

```shell
  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

```css
@import "tailwindcss";
@import "@qctrl/elements-css";
```

Note: You can also import individual CSS files if you need to omit/override some properties.

```css
@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:

```ts
import semanticVariables from "@qctrl/elements-css/figma/semantic-variables.json";
import primitiveVariables from "@qctrl/elements-css/figma/primitive-variables.json";
```