Q-CTRL Elements CSS

Q-CTRL Elements CSS is a utility framework for building Q-CTRL products. It’s built upon Tailwind and designed to match the Element Design Library by using the design tokens. It also introduces several base, component, and utility classes to make working with Elements CSS easier and more versatile. As such our documentation builds upon Tailwind’s documentation to include these differences.

Installation guide

Depending on your project you may be using a specific framework that requires some additional setup. In this case we recommend you follow one of Tailwind’s framework guides and then jump ahead to Adding Elements CSS plugin.

Using npm

  npm install -D @qctrl/elements-css@latest tailwindcss@latest postcss@latest autoprefixer@latest

Using pnpm

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

Installing Elements CSS as a Tailwind Plugin

For most projects, we recommend installing Elements CSS as a Tailwind plugin with PostCSS.

Add Tailwind as a PostCSS plugin

Add tailwindcss and autoprefixer to your PostCSS configuration. Most of the time this is a postcss.config.js file at the root of your project, but it could also be a .postcssrc file, or postcss key in your package.json file.

Create your configuration file

To use the Elements CSS plugin you need to create a Tailwind config file and pass it as a plugin. You can generate the config file by using the Tailwind CLI utility included when you install the tailwindcss npm package.

  npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Adding Elements CSS plugin

  // tailwind.config.js
  /** @type {import('tailwindcss').Config} */
  module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // Any node_modules that use tailwindcss
+  ],
  theme: {
    extend: {},
  },
+  plugins: [require("@qctrl/elements-css")],
};

Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;