Small utility to format long classnames with template literals
npm install @netlify/classnames-template-literalsUtility 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(
);
`You can also use conditional classes:
`javascript
import ctl from "@netlify/classnames-template-literals";const buttonClasses = ctl(
);
``