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

131–140 of 300 posts

Re: Play with TailwindCSS in the Browser

#131

Post by bpicolo »

gedy wrote: post #126
65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

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…

> but with no 3rd party components available

There are a bunch of great 3rd party components available in tailwind now. https://daisyui.com/ is one I've been using. They're usually a tad bit lower level than typical framework component libs, but the flexibility is great.

A great thing about that is they're not React-specific, Vue-specific, etc. You can use them in everything from raw html to your JS library flavor of choice.

Re: Play with TailwindCSS in the Browser

#132

Post by atonse »

friendlypeg wrote: post #43

Is there a VSCode plugin that help you do something like this: when I type text-20px it will try to find the closest class e.g. text-sm automatically?

No but when you select an intellisense suggestion, before hitting enter, it’ll show you the underlying css. That can sort of give you the same effect even if in reverse.

Re: Play with TailwindCSS in the Browser

#133

Post by DecayingOrganic »

65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

As a side note, you can configure prettier for automatic class sorting for tailwind! It makes a huge difference in terms of code readability and maintenance.

https://tailwindcss.com/blog/automatic-class-sorting-with-pr...

Re: Play with TailwindCSS in the Browser

#134

Post by jbaczuk »

I've found Tailwind to be great for getting a project going quickly. It's pleasant to use when you get started, but it can become a pain later on when you have a lot of styles to maintain. I've been using it everyday at work for a year and a half, and wished I would have known a few things before I started using it. Here are a few:

1 - It encourages styling on the fly. Because it is faster initially, you don't have to constantly switch between a CSS file and your markup, it feels good to style it as you go, and gives you an initial productivity boost. But it can cost you in technical debt later, so be careful.

2 - It makes your markup really messy. You end up repeating the same utility classes over and over. Then you can forget which utility class you used for things that should be defined globally like spacing or colors, and have components with different styles and not one place where you can change it.

3 - It makes debugging styles in the browser difficult (you change the style of one class, it affects everything, not just the tag/component you are working on. Having component-based classes allows you to debug styling on individual components much easier. I find myself debugging by actually adding the utility classes to the markup.

4 - You have to memorize another name for every many css properties (e.g. line-height => leading), or just be constantly in the docs. VSCode extensions are helpful, but it does not always detect that you are trying to type a Tailwind class, esp. if it's dynamically generated classnames. It can also make VSCode run slower.

5 - Some CSS properties are missing values as options, so you have to customize it out of the gate (e.g. min-height) or use the custom m-h-[value] syntax, but why not make all of tailwind like this?

6 - Trying to sync Tailwind configurations between projects (e.g. between a component library and an application) can become tedious.

Like anything, I think good styling is probably a combination of global styles, utility classes, and component classes. Something like Tailwind + Bootstrap + SASS on top of your own custom classes might make for a good tool, IMO.

Re: Play with TailwindCSS in the Browser

#135

Post by baryphonic »

I just learned tailwind a couple weeks ago for a small project. I really love it—I've gone from being a CSS hater to not having to think much about CSS.

The documentation is excellent, with working examples. It has taught me about CSS properties I didn't know existed. Instead of attempting to grok the entirety of the MDN docs, I can quickly use configurations that work. (The ubiquitous Seinfeld references are an enjoyable treat, too, though YMMV.)

The other important piece is that the tooling is great. I use the VS Code extension, and beyond the excellent intellisense, the extension gives me exactly which properties and values are generated by the Tailwind classes when I mouseover.

The only "complaint" I have is that sometimes in larger projects, I'd want to create reusable style components (almost like traits) that could be reused in components that appear similar but whose behavior is distinct. This is a minor complaint because Tailwind actually allows for this, but the syntax is slightly awkward.

In all, I'm much more productive, and I imagine my code is more maintainable. It's certainly smaller without dozens of lines of CSS including the commented out sections.

Re: Play with TailwindCSS in the Browser

#136

Post by likortera »

gedy wrote: post #126
65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

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. The messes out there are unbelievable.

Re: Play with TailwindCSS in the Browser

#137

Post by atonse »

My90thaccount wrote: post #55
jonwinstanley wrote: post #41

Earlier quoted context omitted.

How does it affect quality?

Tailwind means making your HTML non-semantic, usually backed by JavaScript. This has created an arms race where parsers such as screen readers need to do ever-evolving heuristics to provide a reader mode. The code usually cannot be modified or even viewed in a readable form by users. Of all things, it's not user-centric. You're going to tell me next that you have a JSON interface instead. But that's a site-specific A…

The semantic web feels like yet more yak shaving. Focus on adding value to people.

I know this cuz I was a big ra ra cheerleader for the semantic web 15 years ago.

But then I found it made no bloody difference in actually helping people.

I’d much prefer if we all spent our energy building better, smarter screen readers.

Re: Play with TailwindCSS in the Browser

#138

Post by aniforprez »

wiredearp wrote: post #84
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…

Tailwind is a multi million dollar business [1] and I've found that the only credible explanation is they they simply hire people to leave positive comments in popular forums. The backenders who bite on it will eventually despair and "upgrade" to Tailwind UI which is a paid product. If there are real frontenders who buy into this, they are from a segment that have not followed CSS for the last ten years while being y…

This is a hell of a lot of unsubstantiated mud slinging that really adds nothing to the conversation

Re: Play with TailwindCSS in the Browser

#139

Post by xkcd1963 »

I tried it out for a project and I regret it. Following reasoning:

- CSS was created so no inline styling would be necessary. By assigning CSS attributes to classes we are back at inline styling. The html just explodes if you don't put the tailwind classes somewhere else, but then again, CSS is already here for that

- one wastes time learning new naming conventions. Most frontend developers have internalised CSS attributes

- it runs through a javascript lib. That makes the setup more complicated. Browsers support CSS natively so why build something on top of that

Re: Play with TailwindCSS in the Browser

#140

Post by likortera »

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.

Because most people worry more about maintainability, ease of writing, modifying, performance, resulting bundle size, tooling, consistency, etc and very few about "how it looks".

Everyone that complains about tailwind is because they didn't use it yet.

Yes, looks weird at first. That's not everything that matters.

Post reply on HN