classnames-template-literals

Utility originally created to deal with long Tailwind classnames.

To make our code more readable, we extract our Tailwind classes into variables, for example:

``javascript
const twClasses =
tw-sr-only
focus:tw-not-sr-only
tw-bg-teal-darker
tw-text-white
tw-block
tw-text-sm
tw-l-0
;
`

The issue with writing classes this way is that they are rendered as-is in the DOM.

Example:

`javascript
class="
tw-sr-only
focus:tw-not-sr-only
tw-bg-teal-darker
tw-text-white
tw-block
tw-text-sm
tw-l-0"
>
Hello world



`

Using the ctl util formats classnames so they are rendered in a more standard way in the DOM.

Example:

`javascript



Hello world



`

Installation

`javascript
npm install @netlify/classnames-template-literals
`

Usage

Wrap your classnames inside ctl.

`javascript
import ctl from "@netlify/classnames-template-literals";

const buttonClasses = ctl(
bg-black
text-white
p-1
rounded-sm
);
`

You can also use conditional classes:

`javascript
import ctl from "@netlify/classnames-template-literals";

const buttonClasses = ctl(
bg-black
text-white
p-1
rounded-sm
${someState && "bg-pink"}
);
``