Getting Started with ClearKit CSS

ClearKit CSS is a CSS library for Clearbit products. It exports CSS and a custom configuration based on Tailwind CSS

Once bundled with your app, ClearKit gives you a few things out of the box:

Utility classes that can be used to compose interfaces
Helper classes that are abstractions of groups of utility classes and used to define common components (which we refer to as Blueprints)
Theme variables including color tokens that can be referenced

Using ClearKit CSS

Install the npm package

yarn add @clearkit/css

In React Apps

To start using the utility and helper classes in your React apps, you'll need to import the stylesheet (usually in index.js or a app level CSS file). Once that's done you'll be able to apply the classes directly to your components and markup:

Importing @clearkit/css and applying classNames

import 'clearkit/dist/clearkit.css';

const MyComponent = ({ children }) => (
  <div className="bg-white border border-gray-200 p-3 mb-3">{children}</div>
);

In non-React Projects

ClearKit CSS can be imported to any project by adding the npm package and referencing the bundled stylesheet. You'll be able to use helper classes to implement your own versions of the blueprints, and reference variables from your own stylesheet or javascript files.

Applying classes

<div className="bg-white border border-gray-200 p-3 mb-3">
  My container
</div>