Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually.
For instance, take the navigation drop-down button styling:
<span className={'block relative border-2 w-full h-3 content-["test"]' + tagProps('before', ['block', 'absolute', 'top-2', 'border-2', 'w-full', 'h-0', 'content-[""]']) + tagProps('after', ['block', 'absolute', 'bottom-2', 'border-2', 'w-full', 'h-0', 'content-[""]'])}></span>
Along with this function:
const tagProps = (tag, prop) => {
let x = ' ';
for(const property of prop)
{
x = x.concat(tag.concat(':').concat((property).concat(' ')));
}
return(x);
Mysteriously, the styles appear to apply randomly. Closing the browser, VSCode, then reopening them yields a 25% chance of successful style application. The reason for using a function here is due to TailwindCSS not allowing custom properties inside brackets for pseudo-elements.
If each pseudo-element were explicitly written out, the line of code would stretch extensively:
<span className='block relative border-2 w-full h-3 content-["test"] before:block before:absolute before:top-2 before:border-2 before:w-full before:h-0 before:content-[""] after:block after:absolute after:top-2 after:border-2 after:w-full after:h-0 after:content-[""]'></span>
This approach seems unreasonable. Additionally, I am unable to format the JSX statement in multiple lines when utilizing the class name generation function.
The question arises - why is this library praised highly? How does it differ from using CSS modules in nextjs?
Your feedback and suggestions on how to tackle this dilemma are greatly appreciated.