DEV Community

Discussion on: TailwindCSS: Adds complexity, does nothing.

View post

Replies for: So you did actually duplicate the code into .chat-notification and .new-component. If, by "duplicate", you mean, I created a const variable with ...

 
neophen profile image
Mykolas Mankevicius • • Edited

You do like your strawmen don't you?

import tw from 'twind'; 
export const MainComponent = () => <>
  <div className={tw`p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4`}/>
  <div className={tw`p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4`}/>
</>;
export default MainComponent;
Enter fullscreen mode Exit fullscreen mode

Imagine for a second that React could use components, I know it's not possible, but just imagine, and your strawman code would become like this:

import tw from 'twind'; 
export const MainComponent = () => <>
  <ChatNotification />
  <NewComponent />
</>;
export default MainComponent;
Enter fullscreen mode Exit fullscreen mode

If only React or any other js framework would have the concept of components. How beautifull the world would become, right? Maybe one day we'll be able to write code like this, but most likely not for years to come!

And CSS isn't built well for code reuse. is also wrong.

All the utility classes are there in the css file, once. And are being re-used by all these different components. Which makes the final css tiny, and those CSS classes, wait for it... re-usable. OMG, WOW, SUCH IMPOSIBILITY.