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

261–270 of 448 posts

Re: Tailwind CSS v3.0

#261

Post by Kerrick »

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?

It's possible if you substitute "without modifying the HTML" with "without modifying the HTML for styling purposes." That's because the HTML is adversely and unnecessarily bare-bones, missing semantic markup that the CSS could hook into if needed. Specifically:

- There must be a logical reason for wanting to make the word "tiny" use a small font, so that word is missing a tag that represents that prosaic intent. I've used , but depending on how you'd verbalize the word "tiny" (which is what you're representing both with making it use a smaller font and with wrapping it in a semantic tag), you might also wish to use or another tag.

- Similarly, there is missing semantic markup inside the for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them. This is much like trying to represent two paragraphs of prose with just a couple newlines, rather than actually wrapping each in a

tag. To fix this error, I've added tags as necessary to implement the semantic hCard microformat -- independently of styling.

- I've also added the recommended attributes to the image tag, because it was missing. (And for the sake of the Codepen, I replaced the image's src with a placeholder so as not to hotlink from tailwind's site.)

Given those improvements to the semantic structure of the HTML, here's how you can make the author's name appear on the right, with the quote underneath, with a line break before the company name, and "tiny" in a small font: https://codepen.io/Kerrick/pen/KKXgPYw

Re: Tailwind CSS v3.0

#262

Post by nickjj »

If anyone is interested I just updated a bunch of my example Docker apps to use TailwindCSS v3. That includes examples for Flask, Django, Phoenix, Rails, Node and Play.

Here's a link to the repos: https://github.com/nickjj?tab=repositories&q=docker-*-exampl...

It took longer to rebuild the Docker images than making the v2 to v3 Tailwind specific changes. In my case it came down to deleting and renaming a single property in my Tailwind config file.

Re: Tailwind CSS v3.0

#263

Post by freebreakfast »

seanwilson wrote: post #215
freebreakfast wrote: post #185

Earlier quoted context omitted.

> 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 t…

The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is.

> Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way?

I looked at on the first four examples, but my responses are yes and yes.

Take the figure example. The first div, which groups blockquote and figcaption, is extraneous and unnecessary for the end styling result. The second div is not extraneous because it exists for a purpose. The purpose of the second div is to place emphasis on the name or make it stand out. Thus, it should be changed to em. The third div is extraneous. With the HTML in place, grid it up.

You have the container (figure) with two columns and two rows. The image sits in the first column spanning both rows. The blockquote sits in the second column on the first row. The figcaption sits in the bottom right-hand corner. Then tweak to get your img and other parts as desired (e.g., width, spacing, font-size, etc.).

> You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox) ... to get around CSS quirks (search for "wrapper div" for examples).

Sometimes flexbox is the wrong tool. Sometimes floats are better. Sometimes grid is better. If you find yourself reaching for extra HTML elements first, you should stop and re-evaluate whether your approach to achieving that layout is appropriate.

On quirks, my experience is that "quirks" are rarely actual quirks. They are usually a limited understanding of HTML and CSS.

Re: Tailwind CSS v3.0

#264

Post by freebreakfast »

andkon wrote: post #192
freebreakfast wrote: post #185

Earlier quoted context omitted.

> 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.

You've never put a number of elements together in a div, and added a class and styles to that div rather than each individual element? You should try it out.

I do so for semantics. I don't do it for style.

Re: Tailwind CSS v3.0

#265

Post by valtism »

runarberg wrote: post #95
rekoros wrote: post #36

Tailwind made it possible for me (backend developer) to write somewhat maintainable frontend code. It’s a joy to use both as a writer and reader.

There is a dead sibling comment which I will repeat with a bit kinder words, and with a different caveat. As a frontend developer I don’t like Tailwind for several reasons, it brings the styling into the structure. As a frontend developer Tailwind is at a forefront of what I would consider bad practice and encourages a code style which would be a nightmare for me to maintain. That said. Tailwind seems to be loved be…

I am a professional frontend developer working on a large-scale react application and I love tailwind. I am proficient in CSS, but having colocated html (well, JSX) and css makes so much sense, and the design system really helps fast iteration while also keeping things looking nice.

Re: Tailwind CSS v3.0

#266

Post by ahallock »

I've been working with CSS for over twenty years, and Tailwind is the way forward for me. Some of the big benefits are:

* No more worrying about naming class selectors. This frees up so much cognitive space. The less you have to worry about naming the better. I used the SUIT CSS naming convention before, which allows a mix, and that just creates friction. You need the same level of abstraction all the way through.

* No more flipping between files. You edit your styles directly in the HTML. You will need to consult the TW docs, of course, but they're easy to navigate.

* Tailwind is more than just inline styles. It provides a nice syntax for targeting breakpoints and little utilities for conveying more abstract styles/stacking rules.

* TailwindUI is a great way to jumpstart a project and looks way better (IMO) than Bootstrap's components.

* JIT is awesome

I'd be remiss if I didn't mention some cons:

* Looking at a bunch of class names in your HTML is at overwhelming at first. It's hard to delineate the structure. Using proper HTML elements, roles, etc. helps.

* You will need to DRY up your repetitive styles by moving things to templates/components. So you still have to name things, but just keep it generic (alert, dropdown, badge, etc)

* Sometimes you'll have to create class selectors when working with web frameworks and JS libs that require a single class selector option.

Re: Tailwind CSS v3.0

#267

Post by mixedCase »

azangru wrote: post #223
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…

> CSS modules still seem to solve every problem Tailwind solves, and better. I don't understand Tailwind either; but I find myself struggling with CSS modules when I need to override a CSS rule of a child from a parent. Like, say, my button should always be green, except in this context I want it to be purple, its font-size larger and its padding a bit different. With CSS modules, the parent component is unaware of t…

.button is the default .button-context is the context version

className={isContext ? ".button--context" : ".button"}

----

alternatively if you want many unrelated base rules that aren't color/padding as a baseline:

.button contains base rules .button--default default color/padding .button--context contextful color/padding

className={`.button ${isContext ? ".button--context" : ".button--default"}`}

Re: Tailwind CSS v3.0

#268

Post by yasserkaddour »

I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this:

    Yikes!
I would love to have a transpiler that produces the line above from a code like this:

    Yeah!

Re: Tailwind CSS v3.0

#269

Post by 14u2c »

lhorie wrote: post #230
seanwilson wrote: post #50

I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach. With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class name…

> I used the JIT version recently on a new landing page Yeah, that's kinda the poster child use case for Tailwind and similar frameworks. Landing pages are all about being jazzy and unique and eye catching, and not so much about code reusability/composability. Where it gets less fun is when you want widget consistency across multiple areas of a site and across design tweaks over time, since now you have to deal with…

In the context of component based development, react etc., I believe what you describe is actually very beneficial. Think about a case where instead of doing something you write an atomic component which uses tailwind internally.

With this workflow:

* There are no global styles that can have an unknown or unexpected impact on the application when modified.

* The component's style is completely encapsulated. It can be placed anywhere in the application without worrying about inherited styles causing problems.

edit: formatting

Re: Tailwind CSS v3.0

#270

Post by hbbio »

yasserkaddour wrote: post #268

I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this: Yikes! I would love to have a transpiler that produces the line above from a code like this: Yeah!

https://windicss.org/ does it

It also seems that the major speed improvement in Tailwind is inspired by windi

Post reply on HN