Press/to search

Core Concepts

Import Framework v1.0.9

The most recommended way of using Yogurt CSS is installing it with the package manager (Yarn, Npm), and importing the .scss file from the node_modules directory.

# YARN
$ yarn add yogurt-css
# NPM
$ npm i yogurt-css
Note: Require Sass/SCSS preprocessor to use the @extend directive. (See Using Yogurt via CLI without doing it yourself.)

Base Styles

You can inject the Yogurt file on your CSS base style by using the @import directive and expose the utility classes with @extend directive. (See Extract Utility Classes, Refactoring UI).

// @file: `src/plugins.scss`
@import "node_modules/yogurt-css/yogurt";

html {
@extend
.font-default,
.antialiased,
.text-lg,
.text-charcoal-100;
}

body {
@extend
.bg-gray-100;
}

p {
@extend
.text-md,
.depth-relaxed;
}

a {
@extend
.text-orange-500,
.\(hover\)text-orange-600,
.\(hover\)underline;
}

h1 {
@extend
.text-2xl,
.font-semibold;
}