281–290 of 474 posts
Earlier quoted context omitted.
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
Earlier quoted context omitted.
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
The parent comment was specifically about not using components.
But you use your Bootstrap/Tailwind utility classes in JSX. Now your styling is tightly-coupled to your component again. Isn't that just CSS-in-JS with more steps and less power?
1. Tailwind is awesome. 2. I hate the new website, sorry. The old one was clean, focused and clearly portrayed what TW does. The new one is IMHO big, loud, and a lot less focused. 3. I have had endless issues compiling with npm[1], and am using yarn just because of tailwind. Anyone else with this issue? 4. 30 minutes to upgrade is a lot when you manage thirty sites. Though if it is not worth it, no one is forcing me…
I've spent way too much time trying to find the screencasts that were there yesterday and seemed to have disappeared completely. Now they link to somebody's Youtube Channel. How the hell am I supposed to complete my WorkCation app now?
Earlier quoted context omitted.
> 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writing and updating attributes like this?! class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" How could you possibly manage this without components? Ctrl-F "lg:text-7xl" and replace?
You don’t need to be using a JS framework to have components. Pretty much any server-side templating language allows extracting “components” in the form of reusable HTML fragments. And even if you’re serving static HTML, there’s plenty of ways to compile a template into a static file.
Earlier quoted context omitted.
The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…
> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…
Sounds a lot like an edge case. Most consumer applications do not need theming.
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…
Earlier quoted context omitted.
(I have little experience with Tailwind, but I can still make the following argument) I think you're making a mistake in assuming that the example shows how you should actually use Tailwind in a project. The creator himself has said that Tailwind should be combined with whatever component-system your framework provides. That's how you can get your semantic tags. ...and it's also how you should write Websites anyways…
The ol' theory vs. practice…that all sounds fine in theory, but all it means in the end is you've taken a giant wad of dig/span tag soup with 30 utility classes and broken it up into reusable bits of tag soup with utility classes. Or you move everything over to @apply…but now you have a bunch of stylesheets which are completely incompatible with every other CSS framework/build system. It's not a panacea.
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…
> 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…
Earlier quoted context omitted.
The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…
> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…
You can only change so much of the styling without changing markup.
https://tailwindcss.com/docs/theme [1]