Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Play with TailwindCSS in the Browser

play.tailwindcss.com

Post reply on HN
Print view View original

161–170 of 300 posts

Re: Play with TailwindCSS in the Browser

#161

Post by hbn »

kanonieer wrote: post #78
halotrope wrote: post #71

There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it. I know it is conceptually "wrong" and a bunch of well crafted CSS classes would be more elegant. In the end it works, works really well and makes collaboration dead simple. Commonly used groups of classes can either be aliased by @apply or used in a (react) component. I used CSS way before Tailwind was a thing and in…

> There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it. I know a lot of people who have tried but didn't like Tailwind. I think most people like it on a greenfield project, but that number drops off when they go back to a Tailwind project after some time.

Tailwind projects are the only ones I've hopped into for my first time (i.e. never seen the codebase before) and I can immediately be productive cause I don't have to wrap my head around one specific person's ideas of how classes should work and what all the names mean.

Same applies for my own code that I come back to after a year or 2 of not having touched it. It's way easier to parse a template that declares its own styling than a template with references to style classes that may be across multiple CSS/SCSS files and are probably badly named

Re: Play with TailwindCSS in the Browser

#162

Post by calvinmorrison »

likortera wrote: post #136
gedy wrote: post #126

Earlier quoted context omitted.

I really like utility classes and think Tailwind is really smart for many usecases, but the drawback with Tailwind is even if you componentize, your code is sprinkled with very specific visual classes like for shadows, border radius, etc. When companies want to refresh their look and feel, it's really annoying to change everything to remove now unwanted shadows, etc. In spite of it's age, I've found Bootstrap is bett…

Have you ever had to change the company's look and feel with anything else than tailwind? I had to do it with a BEM codebase, and I also had to do it with tailwind. The tailwind situation was by far the easiest one. And it was because I was not afraid to remove things that could break unrelated parts of the application. Not allowing developer to hand write CSS is a great restriction for a good bunch of developers. Th…

> Have you ever had to change the company's look and feel with anything else than tailwind?

Yes, many times, with normal CSS. It's basically the point of cascading style sheets. Sticking to proper class names and elements makes reskinning a breeze.

Re: Play with TailwindCSS in the Browser

#163

Post by calvinmorrison »

onion2k wrote: post #40
rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remem…

> That's exactly what it is.

Which is why this is basically reinventing inline styles. With some shorthand.

How did we go from removing and to calling it <div class="bold" an improvement?

Re: Play with TailwindCSS in the Browser

#165

Post by dangerface »

dham wrote: post #67
anon1378 wrote: post #62

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states: How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to av…

The problem is you're looking at a single input box. Typically those would be defined as an object and have a prop passed in to configure colors and such. You're typically using it with a frontend framework or web components. If you're in Rails you can use ViewComponents or use apply syntax for primitives. Primitives are the outlier. You define them once and they're out of the way. Where it shines is when you're not…

If you are doing components in react instead of using classes how does this solve the problem of coming up with class names? You still have to come up with the class name you just apply it to your react component instead of in css.

Re: Play with TailwindCSS in the Browser

#166

Post by likortera »

calvinmorrison wrote: post #162
likortera wrote: post #136

Earlier quoted context omitted.

Have you ever had to change the company's look and feel with anything else than tailwind? I had to do it with a BEM codebase, and I also had to do it with tailwind. The tailwind situation was by far the easiest one. And it was because I was not afraid to remove things that could break unrelated parts of the application. Not allowing developer to hand write CSS is a great restriction for a good bunch of developers. Th…

> Have you ever had to change the company's look and feel with anything else than tailwind? Yes, many times, with normal CSS. It's basically the point of cascading style sheets. Sticking to proper class names and elements makes reskinning a breeze.

> It's basically the point of cascading style sheets

The "cascading" part is what makes it incredibly complicated. Keeping the "cascade" in sync with the actual markup is not a trivial task in teams with many people of different skills levels.

Not everyone is a top 1% dev, so we need easier and safer tools so that everyone can work and maintain a codebase.

> Sticking to proper class names and elements makes reskinning a breeze.

This is more easily said than done. It's like saying "Just don't write bugs". Every single project I find that has been built with BEM and similar patches after a couple years are just a mess and their CSS becomes "append only", as there's no guarantee that removing something won't break in unexpected ways.

Re: Play with TailwindCSS in the Browser

#167

Post by calvinmorrison »

likortera wrote: post #166
calvinmorrison wrote: post #162

Earlier quoted context omitted.

> Have you ever had to change the company's look and feel with anything else than tailwind? Yes, many times, with normal CSS. It's basically the point of cascading style sheets. Sticking to proper class names and elements makes reskinning a breeze.

> It's basically the point of cascading style sheets The "cascading" part is what makes it incredibly complicated. Keeping the "cascade" in sync with the actual markup is not a trivial task in teams with many people of different skills levels. Not everyone is a top 1% dev, so we need easier and safer tools so that everyone can work and maintain a codebase. > Sticking to proper class names and elements makes reskinnin…

You're just shifting work though. The commit will now contain 10000 non html structure changes to an html, phtml, whatever, instead styles to a CSS sheet. Might as well go back to doing inline styles. There's a reason we don't do that anymore.

Re: Play with TailwindCSS in the Browser

#168

Post by jakelazaroff »

skttl wrote: post #159
jakelazaroff wrote: post #127

Earlier quoted context omitted.

Okay, but now we’re back to Tailwind being back to syntactic sugar for styles (you can definitely put media queries in a style tag). I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!

>(you can definitely put media queries in a style tag) How?

    @media (min-width: 100px) {}

Re: Play with TailwindCSS in the Browser

#169

Post by azangru »

onion2k wrote: post #40
rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remem…

> Hopefully you're good at that and you can remember, else you'll duplicate things. Hopefully your entire team are aligned on the same naming conventions, or your project's styles will be a total mess.

  - CSS classes can be named on a per-component basis, according to one of the well-established naming conventions (BEM, SMACSS, or whatever). This does not require remembering the names of other classes.
  - With the arrival of web components, styles can be scoped within the shadow DOM; and the name collision becomes a non-issue; as well as keeping track of _all_ the CSS that's written in the project. If CSS classes don't leak, you can focus your attention only on a given component and ignore the rest.
  - Instead of CSS-in-JS, one could use CSS modules, which are just regular CSS with a build step. The relevant project-level (site-level, page-level) constants can be defined as CSS constants on the root element.

Re: Play with TailwindCSS in the Browser

#170

Post by criswell »

config_yml wrote: post #107
irrational wrote: post #56

Earlier quoted context omitted.

> They've gone a bit crazy with the latest features Can you elaborate? What are the latest features?

Arbitrary Variants looks a bit crazy to me (I haven't used it yet though): https://github.com/tailwindlabs/tailwindcss/pull/8299

I know it's going to be abused to hell like everything popular but definitely a useful power tool.

It'll be really nice for container queries when they're ready. Something like: `wider-than-[500px]:hover:text-red-500` and so on.

Also super nice for `:has` (although ordering is a concern at the moment): `[:has(:invalid)]:bg-red-500`.

Post reply on HN