371–380 of 474 posts
Earlier quoted context omitted.
I don’t want to steal the focus from the achievement, but the landing page fails to open on Safari on iPad Air 2013.
Yes, still seeing that too. The tailwindcss homepage fully loads for a brief moment then shows a white screen with "An unexpected error has occurred." Using Firefox on an Android phone.
I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…
Actually it's more like toolkit to make your own set of utility classes. With one config you can really change it to be whatever you need. I always throw away colors on every project and change it to semantic naming. I add / remove fontsizes, spacing whatever project needs. I've been also confused how can people use it without touching the config but apparently many do. I guess when developers don't have particular d…
You mean like CSS? Why recreate raw CSS as classes and use that in your CSS? I'm sorry but all I'm seeing is a huge disconnect.
Earlier quoted context omitted.
> 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…
Try https://andybrewer.github.io/mvp/
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…
What you need to do is heavily use the `extends` property of your tailwind.config.js so it applies the paddings and margins you seek to ALL properties.
Earlier quoted context omitted.
> If you extract components then you require JS Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.
Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering
For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's…
> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any int…
Earlier quoted context omitted.
Depends on the kind of work, for me, in the kind of long-running web software I make HTML is actually maintained or refactored.
For this use case, the "tailwind solution" is to use components, either Angular, React, or whatever, but to pull those "hundreds of classes" into reusable chunks that could be refactored.
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.
Everybody makes @apply out to be the eventual solution to HTML soup, and a project I'm on uses it heavily—BUT the problem is you're now completely locked into a single framework. You can't ditch Tailwind and still use @apply bg-blue-500. If you used regular CSS properties, design tokens via CSS variables, etc. it would be completely portable. I've switched entire sites from one CSS framework to another and it's chall…
For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's…
> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any int…
That's not the full story. Using @apply is the only option if you're not using a component based JS framework like Vue or React.
@aply works everywhere. The current documentation highlights this difference; showing both component extraction and using @apply as a failback when you want to go old school.
Earlier quoted context omitted.
> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any int…
> The right way to use Tailwind is to extract components, for example in Vue. That's not the full story. Using @apply is the only option if you're not using a component based JS framework like Vue or React. @aply works everywhere. The current documentation highlights this difference; showing both component extraction and using @apply as a failback when you want to go old school.
But the right/ideal way to use Tailwind is to use components. That way you get the most dev ex that Tailwind can provide.