@clearkit/one

ClearKit One

A Tailwind preset and accompanying stylesheet for use across Clearbit user interfaces.

Installation

yarn add @clearkit/one

Usage

Note that you'll need to install Tailwind in your project in order to consume @clearkit/one.

Once installed, pull in the @clearkit/one preset in your configuration and you're halfway there.

// Your project's tailwind.config.js
const preset = require("@clearkit/one");

module.exports = {
  presets: [preset],
  variants: {
    backgroundColor: ["even", "odd"],
  },
};

Next, be sure to import the following stylesheet, as it contains all of the class definitions for any .ck-* prefixed component (e.g., ck-button, or ck-toast).

/* Your project's main CSS entry point */
@tailwind utilities;
@tailwind base;
@tailwind components;
@import "~@clearkit/one/dist/components.css";

Voilà!

Local Development

yarn
yarn start

Publishing New Versions

We use the tool np (installed globally) for deploying new versions of the library. There's no need to change the package version in package.json as np will handle incrementing the version when publishing.

When you're ready to deploy and your changes are pushed to master, run np --no-tests and it will walk you through the steps:

• Verifying tests pass
• Choosing a new version number
• Auto-tagging and release notes
• Publishing to NPM

np --no-tests