Live data from Hacker News

TailwindCSS v2.0

blog.tailwindcss.com

351–360 of 474 posts

Re: TailwindCSS v2.0

#351

Earlier quoted context omitted.

Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…

Every graphic designer I've worked with wants it to be pixel perfect. I've seen them numerous times pull out rulers and literally measure the spacing on their monitor! It takes a special breed to be a graphic designer. In my experience, suggesting that it can be a little off gets me a withering look and the suggestion that maybe we should have another developer look at it. It's never an issue with their OCD.

Seems like the graphic designer is the problem then...

The modern web and pixel perfect design is a combo that doesn't mix and any good designer would know that.

Re: TailwindCSS v2.0

#353
I switched from tahyons to tailwinds like 3 years ago and been using it every since on all my React projects. I have tried all the CSS-in-JS stuff etc nothing compares to the dev speed with Tailwinds. Checkout https://42papers.com it's all tailwinds and has a darkmode too.

Re: TailwindCSS v2.0

#354

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…

I was coming from mobile app development when I tried Tailwind (with Vue) and I knew right away that it was architecturally sound. It's the only CSS framework I've ever used since, and I think it's very future-proof.

That said, I really don't like how it's being described as "utility-first". It's very ambiguous language to me even as an experienced programmer, and I've never really seen that phrase used elsewhere. Besides, all that the authors really seem to mean by "utility-first" is that it is "composition-based" as opposed to the more common inheritance-based approach to working with CSS.

Re: TailwindCSS v2.0

#355

Earlier quoted context omitted.

I was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now. The only serious issue I had was when implementing designs provided by an outside designer: 1. The design says this width needs to be 28 px 2. That'd be "w-7", wh…

This won't work for everyone, but it might be possible to push your designers towards using HTML. Tailwind classes are simple enough to manipulate that you don't need to know CSS. After a while, you get the amazing benefit of simply being able to copy and paste HTML from one place to another - since the class names are common, you can copy HTML directly from a design mockup into your application, with only minimal ex…

Love this idea. I do all my design in HTML+Tailwind. I wonder if all designers would use HTML+Tailwind over design software if they knew it.

Re: TailwindCSS v2.0

#356

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…

Hi Adam,

The demo given just below looks amazing. I initially thought it was a video, now seeing that it is actually coded. Brilliant

Re: TailwindCSS v2.0

#357

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…

It's wrong because it's useless: you can use inline styles instead (and if you gzip the html it's probably going to be smaller as long as you factor in the framework, since essentially you are using numeric LZ backreferences instead of useless long class names).

The whole point of CSS classes is that they don't map to fixed styles, so they offer a useful abstraction, allowing you to change the CSS class definition once and effect all elements it applies to.

Re: TailwindCSS v2.0

#359
This is an awesome news. Thanks to the team at Tailwind.

I migrated a big-ish project to TailwindCSS about a year and a half. I like it for the fact that I can train juniors to be productive and part of the big project quickly while the experienced developers can graduate to using it as a utility for their styles.

For those worrying about not being able to work on the type scales, etc. I would suggest trying to use Tailwind as your utility and write your own SCSS.

Try this out for your Styles.

1. Includes Tailwind CSS.

2. Create separate components for repeatedly used set of Tailwind classes. See examples at https://github.com/valinorearth/valinor.earth/tree/master/sr...

This is our Startup's website built in the open. A bit overkill but was our attempt to do a multi-lingual Static Site with 11ty + Tailwind + AWS s3 + Cloudfront + Github Actions/CI and other interesting toolsets.

For instance,

  .button {
   @apply inline-block py-2 px-4;
   @apply no-underline bg-water-600 text-white;
   @apply border border-water-600 rounded;
   @apply transition duration-100 ease-in-out transform;
   @apply leading-tight;
  }

For any number of team-size, I suggest maintaining design-tokens in the Tailwind Config. Of course, do post-process your styles with the likes of PostCSS — postcss-import, autoprefixer, etc.

For those asking for simpler CSS/Styles, I believe Tailwind might not be the right one for you. I don’t really write codes these days (quite a few years actually) but I tend to do a lot of marketing landing pages, brochures-types for prospective customers, and throw-away prototypes.

These days, I like the plethora of classless CSS available for me to choose from. I might have even created one for our internal use based off the NordTheme color palette (will try extending it with TailWind). Here are some of them for you to start off - https://github.com/dbohdan/classless-css

I have come back full circle and now just write in plain CSS for the marketing pages. I was once a purist and started with tools such as Hotdog Professional, Ultradev as an IDE.

Tools such as Tailwind has their places and we are standardizing it for all of our websites, customer dashboard, admin, etc. Check out the Tailwind’s own TailwindUI at https://tailwindui.com

Re: TailwindCSS v2.0

#360

Earlier quoted context omitted.

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

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 rounded-lg

How the hell does that help with consistency? You have to copy paste that mess every time you create a new button, and then guess what happens if the button you copied from needed special margin? Try debugging that if something looks wrong. Also try turning that into dark mode.

Now you've got to search through the spaghetti to find what's custom about this button and fix it every time.

You know what's easier? Creating a ".btn-lg" style to fit our design system, and just typing .btn-lg each time. It also has the bonus of making your code actually readable.

Maybe this is solved with the groups functionality in the latest tailwind, but this is just one of the frustrations I eventually developed.

Post reply on HN