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

51–60 of 474 posts

Re: TailwindCSS v2.0

#51

Post by jonoc »

systemvoltage wrote: post #6

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

The problem I have with pure CSS is it relies on the fact that you and your team are experts at CSS, which is almost never the case. Pure CSS with an unexperienced developer can lead to spaghetti pretty quick. There are always limitations with any approach, including frameworks, but on a team with more than 1 developer and long term maintenance in mind I'd prefer to go with a framework more times than not.

Re: TailwindCSS v2.0

#52

Post by seancoleman »

"Incompatibility with IE11, so you can tell the man upstairs 'sorry boss it's out of my hands, blame Tailwind'..."

I know it's said tongue-in-cheek, but popular frameworks taking this stance is valuable when convincing clients, leaders, authority, etc. to not require IE support. I've consulted on dozens of front-end projects, and showing the stance of "industry leaders" is the most convincing argument.

Re: TailwindCSS v2.0

#53

Post by propelol »

systemvoltage wrote: post #41
damnencryption wrote: post #15

Earlier quoted context omitted.

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

I could use sass to do the same.

Partially. You'll lose the system Tailwind gives you, which makes it easier to be consistent.

Re: TailwindCSS v2.0

#54

Post by jfleck »

qudat wrote: post #24
have_faith wrote: post #14

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.

We use it for a large enterprise webapp. We have a component library that uses react and applies the correct classes to the component there. I came from mostly using styled-components (CSS-in-JS) and tailwind has worked pretty well for us. The benefit of tailwind over css-in-js is primarily one of performance. The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonom…

I built a simple macro/postcss plugin to give tailwind more structure, but preserve runtime performance. https://github.com/fleck/class-types.macro#why-use-this-libr...

Re: TailwindCSS v2.0

#55

Post by chrisan »

dubcanada wrote: post #13
systemvoltage wrote: post #6

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

What benefit does having completely readable HTML offer?

The same benefit as any language you program in. Readability (not saying tailwind is hard, but it can be messy) is one of the most important things I look for.

Re: TailwindCSS v2.0

#57

Post by seancoleman »

cosmotic wrote: post #39

Tailwind smells like using a style attribute but with properties that are fewer characters. It's fully embracing what everyone said to avoid. What am I missing?

You're likely missing 2 things: 1) you probably haven't delved into Tailwind on a non-trivial project and 2) the nuanced difference is between infinite possibilities (style attribute) vs. discrete, "hard-coded" options (Tailwind classes). Think of strings vs. enum values when describing "types" in an application.

Re: TailwindCSS v2.0

#58

Post by bigbassroller »

damnencryption wrote: post #15
systemvoltage wrote: post #6

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never…

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

I second this! I have gone full circle myself. From Dreamweaver (have to start somewhere), hand coding, Bootstrap classes and modifying them, then naturally started using utility classes. Finally made the switch to Tailwind (felt like cheating on a lover, because I loved Bootstrap so much). I then went full on utility classes and low and behold, discovered @apply with nested @screen media queries and went right back to writing clean HTML with named CSS classes that use utility classes in a SCSS file. Its so cool to me, I want to tell everyone about it.

Re: TailwindCSS v2.0

#59

Post by chrisan »

timdorr wrote: post #45
cosmotic wrote: post #36

Earlier quoted context omitted.

At that point, what is tailwind offering?

Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way. You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including comp…

How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?

Re: TailwindCSS v2.0

#60

Post by tbassetto »

k__ wrote: post #42

Half-OT: Are there good UI toolkits out there based on Tailwind? I read it is really flexible, but I don't want to start from zero. Most of the time I want to throw some pre-made UI components together and then sprinkel them with customizations when required.

Tailwind UI, by the same authors. But it's a paid product.
Post reply on HN