@netlify/classnames-template-literals

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:

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:

<p
  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
</p>

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

Example:

<p 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
</p>

Installation

npm install @netlify/classnames-template-literals

Usage

Wrap your classnames inside ctl.

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

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

You can also use conditional classes:

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

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