Tailwind CSS v3.0

Post by yurishimo » Fri, Dec 10, 2021, 10:09 PM UTC

staunch wrote: post #220

Mizza wrote: post #77

I've been a Bootstrap user for a long time, but I recently made the jump to Tailwind. It's not the revolutionary upgrade I was hoping for, but it's nice evolutionary step in the right direction. It's quite intuitive, but it doesn't get rid of most of the frustrations that come from doing layouts, as those come from the design of CSS itself. `@apply` makes the upgrade worth it though, it's easy to make custom classes…

It seems proprietary because there are ad links disguised as documentation links. You can't click "Components" anywhere on TailwindCSS.com or you'll end up on TailwindUI.com pricing page. It's fine that they want to make money but it's very confusing for a new user. Ultimately, they might make more money by dropping the shady links if it's turning away enough new users. s/Components/Tailwind UI/g across their site wo…

Post by jarek83 » Fri, Dec 10, 2021, 10:16 PM UTC

hiimshort wrote: post #284

I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects…

Post by z3t4 » Fri, Dec 10, 2021, 11:34 PM UTC

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?

  body {
   font-family: sans-serif;
   background: #e4e5f8
  }

  figure {
   text-align: center;
   background: #fff;
   border-radius: 1rem;
   padding: 1.5rem;
   max-width: 40rem;
  }

  figure img {
   border-radius: 50%;
   width: 7rem;
   height: 7rem;
   object-fit: cover;
  }

  figure blockquote {
   font-size: 1.125rem;
   margin: 1rem;
  }

  figure b {
   color: #0ea5e9;
   display: block;
  }

Post by iovrthoughtthis » Fri, Dec 10, 2021, 11:44 PM UTC

tomcooks wrote: post #342

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…

Not eparating concerns also fails VERY hard, but that bites you in the arse when you least expect or want it (unlike writing good CSS which takes only patience and studying). There's a reason why inline styles and important! were to be avoided

Post by iovrthoughtthis » Fri, Dec 10, 2021, 11:48 PM UTC