@netlify/classnames-template-literals
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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"}
`);

Readme

Keywords

Package Sidebar

Install

npm i @netlify/classnames-template-literals

Weekly Downloads

2,846

Version

1.0.3

License

MIT

Unpacked Size

4.95 kB

Total Files

7

Last publish

Collaborators

  • youvalv
  • berdav
  • vitaliyr
  • smnh
  • denar90
  • kathmbeck
  • rj-netlify
  • akardet
  • pieh
  • hrishikeshk
  • sarahetter
  • orinokai
  • ericap
  • seanroberts
  • skn0tt
  • mikewen
  • biilmann
  • marcus.netlify
  • jgantunes
  • eduardoboucas
  • netlify-bot
  • nasiba
  • ascorbic