Demo

Below are some examples of tagged-classnames in action. To get a full picture of what's going on in this page, please view Developer Mode in your browser. You can also view the source code for this page to see now everything works.

With tagged-classnames

<button
  type="button"
  className={tw`
    focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4
    focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2
    dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900
  `}
>
  With tagged-classnames
</button>

Without tagged-classnames

<button
  type="button"
  className={`
    text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4
    focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2
    dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700
    dark:border-gray-700
  `}
>
  Without tagged-classnames
</button>

Comments and string interpolation

<button
  type="button"
  className={tw`
    focus:outline-none ${`text-white`} bg-green-700 hover:bg-green-800 focus:ring-4

    // Single line comment (won't appear in the DOM)
    focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2

    /**
     * Multiline block comment (this also won't appear in the DOM)
     */
    dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800
  `}
>
  Comments and string interpolation
</button>

cx works just as well...

<button
  type="button"
  className={cx`
    text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
    font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600
    dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800
  `}
  onClick={() => alert(`... but comments will be rendered in the DOM!`)}
>
  cx works just as well...
</button>