# cntl

> Small library that helps you write your class names in a more clear, readable and composable way. Especially useful with tailwind css.

Latest version **1.0.0** (published 2020-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install cntl
pnpm add cntl
yarn add cntl
bun add cntl
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-02-05 |
| First published | 2020-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 65 |
| Author | Michał Wrzosek |
| Maintainers | michal.wrzosek |
| Keywords | css, class names, tailwindcss, tailwind, classnames, typescript, template literals |

## Links

- npm: https://www.npmjs.com/package/cntl
- Repository: https://github.com/michal-wrzosek/cntl
- Issues: https://github.com/michal-wrzosek/cntl/issues
- npm.io page: https://npm.io/package/cntl

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-02-05

## README

# cntl

**c**lass **n**ames **t**emplate **l**iterals for **tailwind** type of frameworks

---

This is a small library that helps you write your class names in a more clear, readable and composable way. If you use a library like **tailwind** css where you compose your styles by providing lots of class names this utility tool can help you a lot.

Instead of writing class names directly on your HTML tags in one long string, you can move your class names to separate variable and place your class names, one by one, in multiple rows like you would do it when writing typical CSS.

Also, this way of defining your styles looks a bit like styled components styles.

## Installation

```
npm i cntl
```

This package already comes with TypeScript typings.

## Using

Simple usage (React + tailwind):

```typescript
import cntl from 'cntl';

const buttonCN = cntl`
  bg-blue-500
  hover:bg-blue-700
  text-white
  font-bold
  py-2
  px-4
  rounded
  focus:outline-none
  focus:shadow-outline
`;

const Button = () => <div className={buttonCN}>Click me</div>
```

You can also provide some conditional styles (React + tailwind):

```typescript
import cntl from 'cntl';

const buttonCN = ({ isRed }: { isRed: boolean }) => cntl`
  hover:bg-blue-700
  text-white
  font-bold
  py-2
  px-4
  rounded
  focus:outline-none
  focus:shadow-outline

  ${
    isRed
      ? cntl`
        bg-red-500
      `
      : cntl`
        bg-blue-500
      `
  }
`;

const Button = ({ isRed }: { isRed: boolean }) => <div className={buttonCN({ isRed })}>Click me</div>
```

# Developing this library

This library was bootstraped with [typescript-lib-boilerplate](https://github.com/michal-wrzosek/typescript-lib-boilerplate)

## Installation:

To install all dependencies run:
```
npm i
```

It will install:
- `dependencies` and `devDependencies` from ./package.json
- `peerDependencies` from ./package.json thanks to `install-peers-cli`
- `dependencies` and `devDependencies` from ./example/package.json (example `create react app` for testing)

## Developing your library:

To start developing this library, run `npm run dev`. It will build your library and run example `create-react-app` where you can test your library. Each time you make changes to your library or example app, app will be reloaded to reflect your changes.

## Typescript

This boilerplate lets you develop your libraries in Typescript and you can simultaneously test it in Typescript example create-react-app.

---
_Source: https://npm.io/package/cntl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._