Parse Tailwind Modifier

Allows an easier way to write dynamic and responsive code in Tailwind CSS

Installation:

npm i parse-tailwind-modifier

Usage:

instead of:

   <button
      className={`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all duration-300
                 sm:bg-green-500 sm:hover:bg-green-700 sm:text-gray-800
                 md:bg-yellow-500 md:hover:bg-yellow-700 md:text-gray-800
                 lg:bg-indigo-500 lg:hover:bg-indigo-700 lg:text-gray-800
                 dark:bg-gray-800 dark:hover:bg-gray-600 dark:text-white`}
    >
      Click me
    </button>

you can write:

import parseTailWindModifier from "./parse-tailwind-modifier";

   <button
      className={`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all duration-300
                 ${parseTailwindModifier("sm","bg-green-500 hover:bg-green-700 text-gray-800")}
                 ${parseTailwindModifier("md","bg-yellow-500 hover:bg-yellow-700 text-gray-800")}
                 ${parseTailwindModifier("lg","bg-indigo-500 hover:bg-indigo-700 text-gray-800")}
                 ${parseTailwindModifier("dark","bg-gray-800 hover:bg-gray-600 text-white")}`}
    >
      Click me
    </button>

"But I dislike functions with such long names!"

Of course, if you feel the function name is too long you can import like this:

import parseTailWindModifier as ptm from "./parse-tailwind-modifier"; // or any other name you want to give the function

   <button
      className={`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all duration-300
                 ${ptm("sm","bg-green-500 hover:bg-green-700 text-gray-800")}
                 ${ptm("md","bg-yellow-500 hover:bg-yellow-700 text-gray-800")}
                 ${ptm("lg","bg-indigo-500 hover:bg-indigo-700 text-gray-800")}
                 ${ptm("dark","bg-gray-800 hover:bg-gray-600 text-white")}`}
    >
      Click me
    </button>

Nested Usage:

you can even use it like this:

import parseTailWindModifier from "./parse-tailwind-modifier";

   <button
      className={`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-all duration-300
                 ${parseTailwindModifier("sm",`bg-green-500 ${parseTailwindModifier("hover","bg-green-700 underline scale-150")} text-gray-800`)}`}
    >
      Click me
    </button>

Advantages:

# Less repeated code (well, obviously)

# Nesting possible

# No need to alter tailwind.config.js

# Readable for anyone reviewing the code even if not familiar with this package

Syntax:

Deliberately based on Tailwind syntax:

1. The first argument is the modifier as a string,
2. The second argument is the classes you want to append to said modifier as a string with spaces between them.