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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

211–220 of 448 posts

Re: Tailwind CSS v3.0

#211

Post by BigJono »

marstall wrote: post #161
etchalon wrote: post #119

I’ve never understood CSS frameworks. CSS is the most lightweight thing I touch in the front end. It’s predictable, there are a billion ways to accomplish things, and it’s super easy to namespace yourself to safety. SASS I understand. It makes writing CSS faster. Tailwind feels like you have to learn CSS, but you’ll never have to actually write CSS. Reminds me of CoffeeScript in that way. You always had to understand…

exactly. SASS (and CSS modules) are all I really need. just give me direct access to this amazing language, please!

I don't even see a need for SASS now that CSS has variables and CSS Modules provides composability.

Re: Tailwind CSS v3.0

#212

Post by stefan_ »

aidos wrote: post #118
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

Tailwind is global utility classes too. There’s no runtime aspect. It’s literally just css classes. The nicest thing is that all your variations exist, so you can do things like hover:font-bold. So you can see the rules immediately like with inline styles, but they’re more flexible.

At least finally someone using the dirty word "inline styles". It's like all the other comments here stepped right over that point from the grandparent. Only it's not inline styles, it's inline styles and you are Dennis fucking Ritchie in 1970 and your fingers hurt from the teletype so you are making up crude abbreviations for everything.

Re: Tailwind CSS v3.0

#213

Post by JasonCannon »

Kaze404 wrote: post #204
hsbauauvhabzb wrote: post #195

I like the idea of tailwind, I’ve dealt with raw css and bootstrap before but I’m certainly no frontend developer. How can I learn tailwind enough to become proficient? Most of the documentation I looked at seemed to lack any tutorial on how to locate the correct classes I need, or any other sharp edges that might exist,

My process of learning Tailwind involved nothing but going to https://tailwindcss.com/docs , pressing Ctrl+K to bring up the search, and typing the class I'd use in "regular" CSS. Their search is great at picking these up.

Agreed. My team is doing this very process. If we run into not knowing what class to use, we just look it up on the docs. VSCode also has a great intellisense plugin for tailwind as well (https://marketplace.visualstudio.com/items?itemName=bradlc.v...). For the first day or two we used the docs pretty heavily. Now, we just make a best guess, intellisense generally tells us what the class name actually is, and if we can't figure it out then we go to the docs.

Re: Tailwind CSS v3.0

#214

Post by alberth »

Yabood wrote: post #201
alberth wrote: post #196

I inherently from a coworker who was terminated, a web app built with Tailwind. The tailwind.config.js is missing. I can’t even begin to describe all of the reverse engineering I’ve tried to regenerate the config file with no luck and we’re royally screwed. Make sure you don’t lose that file!

Unless your coworker configured some plugins or extended some classes, a vanilla tailwind config with JIT-enabled should be all you need.

We have a customized theme (colors, fonts, etc), hence the issue.

Re: Tailwind CSS v3.0

#215

Post by seanwilson »

freebreakfast wrote: post #185
seanwilson wrote: post #121

Earlier quoted context omitted.

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. Can you provide an example? I've never found this to be the case, particularly with modern CSS. Happy to be wrong though.

Take a look at the https://tailwindcss.com/ page and search for "div". Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way?

You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox), to target content for styling (e.g. putting a div around the name of the author to make it blue when you otherwise wouldn't tag it) and to get around CSS quirks (search for "wrapper div" for examples).

Re: Tailwind CSS v3.0

#216

Post by francislavoie »

jlelse wrote: post #207
francislavoie wrote: post #184

Earlier quoted context omitted.

Yes, just make sure the `content` config will read your files: https://tailwindcss.com/docs/configuration

Which template languages are supported? I wasn't able to find any information about that.

It's just regexes basically. All languages should be supported. If something that looks like a tailwind class is found, it'll add it to the list of ones it'll generate.

Re: Tailwind CSS v3.0

#218

Post by andrei_says_ »

zachrip wrote: post #130
stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

Based on what you've said, you're right, you don't understand it...the things you're comparing it to don't really make sense. Bem doesn't make sense to compare and neither do css modules. Tailwind is a stylesheet with css classes that do atomic things like changing border radius. It gives you a set of classes that allow you to build just about anything you need with just classes. When you compile an app that uses tai…

I (not OP) get all of these, incl. the relief of not naming things.

But I still prefer naming things to the class soup and the excessive repetition.

ITCSS (Inverted triangle CSS) works with the cascade and results in clean, minimalistic CSS files.

I do not build SPAs though and do get that quick styling works really well for that scenario.

I do import Tailwind colors, spacing and sizes in SCSS maps for easy access and do like the standardized approach.

Re: Tailwind CSS v3.0

#219

Post by Yzupnick »

seanwilson wrote: post #188
z3t4 wrote: post #164

Earlier quoted context omitted.

The example on the Tailwind front page is pretty good semantic wise. Here's my version: “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.” Sarah Dayan Staff Engineer, Algolia

Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?

I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/

Anyone have good advice on a better way?

Re: Tailwind CSS v3.0

#220

Post by staunch »

Mizza wrote: post #77

I've been a Bootstrap user for a long time, but I recently made the jump to Tailwind. It's not the revolutionary upgrade I was hoping for, but it's nice evolutionary step in the right direction. It's quite intuitive, but it doesn't get rid of most of the frustrations that come from doing layouts, as those come from the design of CSS itself. `@apply` makes the upgrade worth it though, it's easy to make custom classes…

It seems proprietary because there are ad links disguised as documentation links. You can't click "Components" anywhere on TailwindCSS.com or you'll end up on TailwindUI.com pricing page.

It's fine that they want to make money but it's very confusing for a new user. Ultimately, they might make more money by dropping the shady links if it's turning away enough new users.

  s/Components/Tailwind UI/g
across their site would be a big improvement.
Post reply on HN