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

    Install

    npm i @netlify/classnames-template-literals

    DownloadsWeekly Downloads

    1,510

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    4.95 kB

    Total Files

    7

    Last publish

    Collaborators

    • dengeist
    • jgee0110
    • biilmann
    • shortdiv
    • marcus.netlify
    • ehmicky
    • erezro
    • lesliecdubs
    • neolegends
    • jgantunes
    • eduardoboucas
    • charliegerard
    • netlify-bot
    • nasiba
    • zachleat
    • ascorbic