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

101–110 of 300 posts

Re: Play with TailwindCSS in the Browser

#101

Post by blain_the_train »

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…

> you're going to end up creating classes using the raw CSS

A program can read what looks like inline css and produce class names for youand put those in class files.

When developing your see "height 20px" In your app its compiled to "h-20" with a css file "h-20: height 20"

This is better because you don't have to learn another way to express the same logic.

Re: Play with TailwindCSS in the Browser

#102

Post by mythz »

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.

If your project is setup to use Tailwind in watch mode where you can view your changes at every save, there's nothing quite as productive.

You get fast iterations without ever having to leave your markup to hunt down to find all the classes elements are using which uses their own structure & nomenclature, esp. if you need to support responsive layouts which every project implements differently that usually grows into some unmaintainable mess. With tailwind's utility classes it's all right there on the element, using intuitive prefixes and shorthand class names derived from the CSS properties it uses.

It's also the only framework I've used where you can copy markup from a number of different sources and it will look exactly the same as the preview where you got it from without it being distorted by the websites leaking cascading CSS styles.

Re: Play with TailwindCSS in the Browser

#103

Post by brightball »

peterkelly wrote: post #32
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.

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

But it does add real value.

Aside from creating a standard naming scheme for your style guide, they also simplify specific CSS tag features by ensuring they can be consistent across browsers without you having to tweak each style.

Outside of that, they acknowledge that you're not going to use custom CSS tags that often because 9 times out of 10 you're going to style something in one place in a template and your programming language will repeat it for you...so there's no real value to creating a dedicated class.

Another that I've found over the lifecycle of a project is that developers forget what CSS is where and end up simply creating new classes for things that they need rather than trying to reuse existing ones...which leads to your CSS growing constantly over time. With Tailwind I rebuilt my entire personal site, brightball.com and ended up with 20 lines of custom CSS. This after restyling the entire site and making it responsive. And I was able to do all of it in an afternoon without ever having even made a responsive site before.

What they've done is created "Rails for Style Guides" and it works beautifully. The Refactoring UI book (fast read) from the authors of Tailwind goes into the importance and reasoning for everything they do and it makes absolutely perfect sense.

https://www.refactoringui.com/

Re: Play with TailwindCSS in the Browser

#104

Post by config_yml »

My90thaccount wrote: post #54
config_yml wrote: post #5

Earlier quoted context omitted.

As someone who's been doing CSS for 20 years now, I think Tailwind is an absolute blessing. They've gone a bit crazy with the latest features, but the core of it is so productive to use, especially in teams. Big fan here.

Once again, productivity is not the ultimate goal of a profession. Your product is suffering in quality because you are taking shortcuts.

It's not, but it's important. And contrary to what you say, using Tailwind is productive for me AND increases quality. So that's a win for my product.

Re: Play with TailwindCSS in the Browser

#105

Post by erokar »

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…

I've used Tailwind on many projects at work for about a year now. I do not like it.

Tailwind seemingly affords an easy way of writing inline styles, but it 1) clutters the HTML, 2) leads to repetition and makes people break the DRY principle (yes, you should extract to components, but people don't always do that), 3) uses names that can be similar but are not identical to CSS properties and feels like a bad abstraction.

If you use something like Svelte, where you can write local CSS within a component I fail the see the benefit of Tailwind. For me Tailwind is the most ill-conceived frontend tech I've had to use in later years.

Re: Play with TailwindCSS in the Browser

#106

Post by pythonaut_16 »

blain_the_train wrote: post #101
onion2k wrote: post #40

Earlier quoted context omitted.

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…

> you're going to end up creating classes using the raw CSS A program can read what looks like inline css and produce class names for youand put those in class files. When developing your see "height 20px" In your app its compiled to "h-20" with a css file "h-20: height 20" This is better because you don't have to learn another way to express the same logic.

So Tailwind with more steps

Re: Play with TailwindCSS in the Browser

#107

Post by config_yml »

irrational wrote: post #56
config_yml wrote: post #5

Earlier quoted context omitted.

As someone who's been doing CSS for 20 years now, I think Tailwind is an absolute blessing. They've gone a bit crazy with the latest features, but the core of it is so productive to use, especially in teams. Big fan here.

> 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

Re: Play with TailwindCSS in the Browser

#108

Post by kaba0 »

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…

Semantic web is a lie. HTML and CSS is not expressive enough in itself to pull that off - you are guaranteed to put many many divs purely for stylistic reason all around your website. Also, as mentioned there is nothing in tailwind requiring only divs, you can use any semantic tag you want, and the whole page can be completely static without an ounce of js..

At least know the topic you criticize.

Re: Play with TailwindCSS in the Browser

#109

Post by hbn »

jakelazaroff wrote: post #82
pocketsand wrote: post #36

Earlier quoted context omitted.

It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between Gray text and Gray text In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.

So use a custom property instead (don’t use inline styles tho): Gray text Or use Sass or something. This problem has been solved for like 15 years.

I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints.

Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger:
I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.

Re: Play with TailwindCSS in the Browser

#110

Post by grayrest »

krono wrote: post #52

Utility classes aren't Tailwind's invention and neither are style systems/constraints. I even believe that their particular implementation is a total mess with way too much and continuous overhead, and that you're probably better off building your own system.

Tailwind's implementation is a total mess. I have a custom preset for UnoCSS [1] focused on Tailwind compatability and use that for my company's low code platform. It's a couple orders of magnitude better for both size and latency and switching has allowed me to delete all the supporting code I'd written to work around Tailwind-the-implementation's shortcomings. I have minor complaints about Uno but I recommend it if you're having trouble with Tailwind.

[1] https://github.com/unocss/unocss

If you mean build your own design system then I've built four separate design systems in SCSS since 2009. I've been fine with switching to Tailwind instead because I can get similar results customizing the theme, it's more comprehensive than my systems, and the network effect advantages of somethign popular vs my one-off thing.

Post reply on HN