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

191–200 of 448 posts

Re: Tailwind CSS v3.0

#191

Post by adamwathan »

travisd wrote: post #59

I wonder what the future of code-splitting with Tailwind will be. With JIT and a large web app, it's easy to ship a massive CSS file even if 90% of the rules are unused on 90% of the pages.

Tailwind author here! Do you have an example of a site using the new engine that is shipping a massive CSS file where most of the styles are unused on most pages?

The Tailwind website is only 36.9kB of CSS and it likely includes more classes than any other Tailwind site on the internet by virtue of the fact that it has to provide visual demos for so many of the classes. I don't think 36.9kB is massive personally, it's much smaller than the CSS of almost every website I've checked.

Re: Tailwind CSS v3.0

#192

Post by andkon »

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.

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.

Re: Tailwind CSS v3.0

#193

Post by _vufv »

With no disrespect to anyone, I think it'd be useful if people bashing Tailwind would briefly list what their day to day programming consists of.

My impression is that most of the negative comments are coming from people that don't code for Web often (I could be wrong). To those folks: I'm not saying you don't know your stuff or that you argue badly - since I was on that side myself a few months back.

What I am saying is that the elegance and pragmatism of Tailwind might not be easy to intuit just by reading about it. Try to implement a simple landing page using Tailwind+TailwindUI and see if any lightbulbs gets lit.

Re: Tailwind CSS v3.0

#194

Post by adamwathan »

___q wrote: post #89
brainzap wrote: post #37

How do I make a button? I am too dumb to get the simple button working.

Well that's easy, silly! Sign in A real joy compared to writing CSS, lemme tell ya.

It's fewer than half as many characters as writing the same thing in CSS:

  .btn {
    display: inline-flex;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 14px;
    border-radius: 6px;
    color: #fff;
    background-color: rgb(79 70 229);
  }
  .btn:hover {
    background-color: rgb(67 56 202);
    outline: 2px dotted transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

Re: Tailwind CSS v3.0

#195

Post by hsbauauvhabzb »

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,

Re: Tailwind CSS v3.0

#196

Post by alberth »

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!

Re: Tailwind CSS v3.0

#197

Post by Yabood »

We've been using Tailwind for over a year now. We use it with Angular for our web application and with Gatsbyjs/React for our production website. I have nothing but love for Tailwind.

Re: Tailwind CSS v3.0

#198

Post by bamboozled »

dcre wrote: post #88
marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

The difference is you type that lingo inline into the HTML instead of in separate files and you don't have to come up with any class names.

This, I've used it only for about a week, there's no way I could go back now.

Re: Tailwind CSS v3.0

#199

Post by [deleted] »

adamwathan wrote: post #194
___q wrote: post #89

Earlier quoted context omitted.

Well that's easy, silly! Sign in A real joy compared to writing CSS, lemme tell ya.

It's fewer than half as many characters as writing the same thing in CSS: .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229); } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow:…

[deleted]

Re: Tailwind CSS v3.0

#200

Post by [deleted] »

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!

[deleted]
Post reply on HN