Parse Tailwind Modifier
Allows an easier way to write dynamic and responsive code in Tailwind CSS
Installation:
npm i parse-tailwind-modifierUsage:
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:
- The first argument is the modifier as a string,
- The second argument is the classes you want to append to said modifier as a string with spaces between them.