TailwindCSS v2.0 • Hacker News Board

Re: TailwindCSS v2.0

#211

Post by pikseladam » Wed, Nov 18, 2020, 9:56 PM UTC

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

Of course you can still use your current system but with windows 10, most of ie11 users switched to never browsers and current use of ie11 is under %1.5 right now. https://www.w3counter.com/globalstats.php?year=2020&month=10

Re: TailwindCSS v2.0

#212

Post by joshmanders » Wed, Nov 18, 2020, 9:57 PM UTC

kolektiv wrote: post #137

joshmanders wrote: post #129

Earlier quoted context omitted.

Tailwind is completely flexible, if you would rather have your colors be `brand-light', `brand-dark`, etc you can. Just update your config however you want. It just comes with a config out of the box that is highly usable for any app and any need without customizing. Purge then allows you to strip out all the extra unused CSS in production.

Ok, so I could mark everything as "brand-dark" and then change the definition of that in the CSS? Mmm. Ok. How about layout and sizing? A lot of that looks a lot more defined - I'll pick a random example from their own homepage then: "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" - if I wanted to change my approach to centring, justification, and sizing, it…

Then you extract components. https://tailwindcss.com/docs/extracting-components

Re: TailwindCSS v2.0

#213

Post by joshmanders » Wed, Nov 18, 2020, 9:57 PM UTC

JxLS-cpgbe0 wrote: post #189

_jjkk wrote: post #164

Earlier quoted context omitted.

Layout tends to be a property of a particular component, and semantic classes don't work well there either. In a complicated codebase with multiple devs, the number of times you could confidently make a "one-place-CSS-change" to a semantic layout class is very small. It's likely that in one place or another, some dev made an assumption about your `sub-container` class or whatever, which causes your change to break th…

but my Cards are design components, they don't have semantic classes. How is ctrl+f "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" better than changing .myCard__title{} ?

Then you extract components. https://tailwindcss.com/docs/extracting-components

Re: TailwindCSS v2.0

#214

Post by kall » Wed, Nov 18, 2020, 9:57 PM UTC

adamwathan wrote: post #128

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 haven‘t even tried the interactive parts but I want to say that just the messaging and presentation flow is spot on.

I‘m 50/50 between tailwind and theme-ui style tools (which are really more similar than not). Just how well you can articulate your vision is honestly convincing me to just fully embrace tailwind. It‘s something every developer from every framework or guard of web development can get on board with.

I‘m happy you are putting the recommendation to use components or partials front and center over @apply. In my experience @apply has the power to negate the wins from tailwind. Maybe v3 can drop it?

One small thing: maybe you already discussed it but I would just drop the word gag reflex from the landing page. It‘s just... unpleasant.

Re: TailwindCSS v2.0

#215

Post by pythonist » Wed, Nov 18, 2020, 9:57 PM UTC

Tailwind released 2.0, but it is a result of constant work releasing new versions gradually and listening to the users. This is a very active project and it is good to keep an eye on new things https://newreleases.io/npm/tailwindcss. Actually, 2.0.1 is out already. :)

Re: TailwindCSS v2.0

#216

Post by joshmanders » Wed, Nov 18, 2020, 9:57 PM UTC

wolco2 wrote: post #193

_jjkk wrote: post #164

Earlier quoted context omitted.

Layout tends to be a property of a particular component, and semantic classes don't work well there either. In a complicated codebase with multiple devs, the number of times you could confidently make a "one-place-CSS-change" to a semantic layout class is very small. It's likely that in one place or another, some dev made an assumption about your `sub-container` class or whatever, which causes your change to break th…

Instead of repeating "d-flex justify-content-center..." everywhere is it possible to define that once and inherit those properties in Tailwind?

Then you extract components. https://tailwindcss.com/docs/extracting-components

Re: TailwindCSS v2.0

#217

Post by Swizec » Wed, Nov 18, 2020, 9:58 PM UTC

seancoleman wrote: post #89

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…

So what you’re saying is that Tailwind is css-in-js with pure css? I can get behind that, design systems and component libraries have completely revolutionized how I think about these things.

Re: TailwindCSS v2.0

#218

Post by mintone » Wed, Nov 18, 2020, 9:59 PM UTC

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

Whenever this comes up I wonder whether there is an opportunity to create a govt specific browser (based on Chromium initially say) which abstracts responsibility to a specific vendor with clearance ala Lockheed or similar. Web is only going to become more of an a) complex environment and b) normal daily workspace for users so it makes sense in the longer term, and considering the size of market we're talking about, licensing would make it worth it.

Re: TailwindCSS v2.0

#219

Post by kall » Wed, Nov 18, 2020, 10:01 PM UTC

Swizec wrote: post #217

seancoleman wrote: post #89

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…

So what you’re saying is that Tailwind is css-in-js with pure css? I can get behind that, design systems and component libraries have completely revolutionized how I think about these things.

Yes that is 100% what it is. Using theme-ui or tailwind is just a switch of technology and syntax. The development style and thinking is the same.

Re: TailwindCSS v2.0

#220

Post by rutierut » Wed, Nov 18, 2020, 10:03 PM UTC

I really think writing component-scoped and BEM named CSS with Tailwind is the sweet spot here.

For example:

  .menu {
    @apply w-full h-12 bg-gray-100 flex flex-row items-center;

    &__icon{
      @apply h-8 w-8 object-fit;
    }
  }