DEV Community

Discussion on: TailwindCSS: Adds complexity, does nothing.

Collapse
 
3200pro profile image
3200pro

I've been writing CSS since 2000. I love the way tailwind works. It's especially nice for modern website development. An agency owner I collaborate with just mentioned that he appreciates it because it unifies the frontend style of a website while allowing junior developers very strong documentation on the style guidelines.

Everyone out there reading this that loves TailwindCSS checkout TailwindUI! I've been using the newly released React Components on my Gatsby websites and it's awesome. Super seamless, super optimized, and it's very fast to build out components.

Collapse
 
amberpython profile image
amberpython

I actually start using Tailwind from TailwindUI with React, that's where I got the bad developer experience.
It is ok to use tailwind UI as a whole component. but if I want to make changes to it, I have to read through hundreds of lines of html with really long classNames. the problem of tailwind is that it enable ppl not to think about components, which makes readability really bad.

Collapse
 
3200pro profile image
3200pro

I'm going to have to disagree. Unless you are trying to use it without purchasing them.

The site has HTML showcasing the components on the frontend if you aren't logged in. If you purchase TailwindUI there are React versions of the components.

*Example:
*

export default function Example() {
return (
<div>
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
Email
</label>
<div className="mt-2">
<input
type="email"
name="email"
id="email"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="you@example.com"
/>
</div>
</div>
)
}

Thread Thread
 
amberpython profile image
amberpython • Edited

I am talking about the full version of tailwind ui. take the pricing section for example, the three tiers component has poor readability. i cannot tell by a first glance the structure of the component. What I am trying to say is tailwind enable developers to write code like this. When I work in a team, it happens. The example is functional and performant, but it is not readable. If we are using styled component, for example, it will force the developer to carefully decide the components in that pages first, then we will see things like <Title/><PriceCard/><CardWrapper/><CardTitle/><PurchaseBtn/>, which will show the structure clearely.