You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

cntl

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

cntl

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


Version published
Weekly downloads
1.6K
decreased by-16.07%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

cntl

class names template literals 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):

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):

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

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.

Keywords

FAQs

Package last updated on 05 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc