@qctrl/elements-css v6.0.1
@qctrl/elements-css
@qctrl/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 Yarn
yarn 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
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Adding Elements CSS plugin
// tailwind.config.js
module.exports = {
purge: [],
+ darkMode: "class",
theme: {
extend: {},
},
variants: {},
+ plugins: [require("@qctrl/elements-css")],
}
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago