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

TailwindCSS v2.0

blog.tailwindcss.com

Post reply on HN
Print view View original

391–400 of 474 posts

Re: TailwindCSS v2.0

#391

Post by corytheboyd »

hanniabu wrote: post #372
omnimus wrote: post #177

Earlier quoted context omitted.

Actually it's more like toolkit to make your own set of utility classes. With one config you can really change it to be whatever you need. I always throw away colors on every project and change it to semantic naming. I add / remove fontsizes, spacing whatever project needs. I've been also confused how can people use it without touching the config but apparently many do. I guess when developers don't have particular d…

> Actually it's more like toolkit to make your own set of utility classes. You mean like CSS? Why recreate raw CSS as classes and use that in your CSS? I'm sorry but all I'm seeing is a huge disconnect.

Yes, like CSS, but it’s effectively a much smaller subset of CSS. Instead of the entire CSS specification being on the table though, it’s a drastically smaller set of “utility” classes (or properties, to follow the “but it’s css” logic)

Re: TailwindCSS v2.0

#392

Post by inopinatus »

pembrook wrote: post #238
seancoleman wrote: post #89

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

> You probably haven't actually delved into Tailwind on a non-trivial project. This is precisely where Tailwind breaks down IMO. It's fast for landing pages and smaller sites--but when implementing a real design system across a complex web app, Tailwind is a nightmare. We've had to add so much custom stuff to the config file it's basically the same mess our CSS was before. I've been-there-done-that with the whole CSS…

Frankly it sounds like you would have nothing but complaints about any CSS framework.

Re: TailwindCSS v2.0

#393

Post by corytheboyd »

citrons wrote: post #381

I took over a fairly large project which used tailwind v1. Have a low-hate relationship with it. I like how fast you can do stuff, but when when a designer creates something a bit custom it all falls part really quick. I understand it solve the issue with reusability and style-guides, but for modern apps that would also mean everything should already be react componentized, so you shoudl not really care about css at…

Engineers of the world, push back on this stuff! Chances are your designer will want to work with you to make designs fit the tooling used to implement them. It doesn’t hurt to at least try it, ask questions. It does hurt to silently hold grudges and release what you know is suboptimal.

Re: TailwindCSS v2.0

#394

Post by JoshTriplett »

seancoleman wrote: post #89

Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…

Suppose you don't want to use a JS framework in your application, and you instead want to serve HTML and CSS via server-side HTML templating. I do understand the premise (mentioned many times in the comments here) that semantic CSS classes have somewhat limited value when you're doing all your HTML via templating.

Are there CSS frameworks that help with responsiveness, and work well with templating, but are designed to work exclusively with SASS/SCSS and not leave utility classes visible in the compiled CSS? Preferably something that doesn't start with "let's make h1 and p and ul all completely unstyled", and instead has reasonable defaults that let HTML work like HTML?

Re: TailwindCSS v2.0

#395

Post by rglullis »

trevyn wrote: post #362
darekkay wrote: post #252

Earlier quoted context omitted.

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…

> HTML and CSS are not concerns, they're technologies. Components are a better way for separating concerns. This is the clearest concise explanation of this I've seen, thank you. That you frequently have to add s in your HTML in order to get CSS to lay stuff out correctly is enough evidence for me. :)

I gather you haven't used much of display:grid?

I'm trying not to make this too much of a dogmatic discussion, but is the cultural norm among developers going to be to just throw their hands in the air and say "styling is hard, let's go shopping for divs"?

On the one hand, I get that most people nowadays see HTML and CSS as object code, and is not that important to be abstraction that people think in. However, current web application frameworks can not solve problems that desktop GUIs frameworks have already solved in the 90s and no one is asking themselves "is this really the way to go forward?"

Re: TailwindCSS v2.0

#396

Post by inopinatus »

pembrook wrote: post #360
stanmancan wrote: post #335

Earlier quoted context omitted.

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

As with all compositional programming, refactor your classes at the point of generation. So you most certainly do have a “large button” concept in your code, as a function/helper/method/partial/template/component.

Otherwise you’re just fighting against the framework.

Re: TailwindCSS v2.0

#397

Post by fbnlsr »

adamwathan wrote: post #128

Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…

That landing page is absolutely insane. It really makes me want to try Tailwind.

Re: TailwindCSS v2.0

#398

Post by SahAssar »

gitgud wrote: post #311
cosmotic wrote: post #299

Earlier quoted context omitted.

Style attributes have very high specificity so they basically preclude using normal CSS files (they would mandate every line include !important)

This is misleading, !important is not required to use inline styles. They still cascade normally like CSS classes... see this example: red text red text blue text Ironically, it's actually complex CSS classes and long selectors that produce high specificity, which then requires even more specificity to override and eventually the dreaded !important

The parent is not talking about inheritance. They are talking about specificity.

Re: TailwindCSS v2.0

#399

Post by dgb23 »

hanniabu wrote: post #372
omnimus wrote: post #177

Earlier quoted context omitted.

Actually it's more like toolkit to make your own set of utility classes. With one config you can really change it to be whatever you need. I always throw away colors on every project and change it to semantic naming. I add / remove fontsizes, spacing whatever project needs. I've been also confused how can people use it without touching the config but apparently many do. I guess when developers don't have particular d…

> Actually it's more like toolkit to make your own set of utility classes. You mean like CSS? Why recreate raw CSS as classes and use that in your CSS? I'm sorry but all I'm seeing is a huge disconnect.

It systematically abstracts CSS to an atomic subset.

You either take the default configuration with a few tweaks, for example if you are a programmer first.

Or you define a more complete, unique system upfront, for example if you implement a bespoke interface from a UI designer.

If you see emerging patterns that ask for composition, then you can easily compose utilities and give your components semantic class names.

It is a blessing for productivity, performance and maintainability, because it decouples CSS concretions by introducing a light, composable abstraction layer between raw CSS and component/semantic CSS.

Think of it as a lightweight, well defined query builder on top of SQL that you use for safe parameter binding and composability. (The analogy leaks a bit but you get the drift)

Re: TailwindCSS v2.0

#400

Post by [deleted] »

darekkay wrote: post #375
fareesh wrote: post #315

Earlier quoted context omitted.

Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering

Not sure about Vue, but in React the simplest thing you could do is to use ReactDOMServer.renderToStaticMarkup(). You can develop your whole "app" in React and then create a JS-less HTML output. There's also Charge [1], a React static site generator with no client-side JavaScript. [1] https://github.com/brandonweiss/charge

[deleted]
Post reply on HN