News for hackers. Stuff that matters.
Re:TailwindCSS v2.0 by timdorr on Wednesday November 18, 2020 @02:37PM (#25141373)
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 really the best of all worlds.

Re:TailwindCSS v2.0 by samuelstancl on Wednesday November 18, 2020 @03:20PM (#25141922)
> 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 internal implementation details.

Re:TailwindCSS v2.0 by fareesh on Wednesday November 18, 2020 @04:42PM (#25142806)
Can you help me understand the architecture a bit better? I have some reservations.

If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB)

Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve the interactive parts of the component scripts.

Re:TailwindCSS v2.0 by darekkay on Wednesday November 18, 2020 @06:11PM (#25143900)
> 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.

Re:TailwindCSS v2.0 by fareesh on Wednesday November 18, 2020 @07:53PM (#25144908)
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
Re:TailwindCSS v2.0 by darekkay on Thursday November 19, 2020 @02:33AM (#25147095)
Not sure about Vue, but in React the simplest thing you could do is to use ReactDOMServer.renderToStaticMarkup(). You can develop your whole "app" in React and then create a JS-less HTML output. There's also Charge [1], a React static site generator with no client-side JavaScript.

[1] https://github.com/brandonweiss/charge

Re:TailwindCSS v2.0 by arvindamirtaa on Thursday November 19, 2020 @02:47AM (#25147151)
> 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.

Re:TailwindCSS v2.0 by samuelstancl on Thursday November 19, 2020 @03:04AM (#25147243)
Sure, you may have to use @apply if you're for example adding Tailwind to an existing project with .css files.

But the right/ideal way to use Tailwind is to use components. That way you get the most dev ex that Tailwind can provide.

Re:TailwindCSS v2.0 by rvense on Thursday November 19, 2020 @02:42AM (#25147132)
I think the three levels all have merit. If you don't end up repeating yourself too much, just add the utility classes directly. If you find yourself repeating a bunch of classes together, maybe you can make a semantic class with @apply. If you're repeating a bunch of HTML (and Javascript) along with the CSS, make a component.
Re:TailwindCSS v2.0 by JxLS-cpgbe0 on Wednesday November 18, 2020 @07:16PM (#25144572)

    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
so @mixin in Sass? @apply in CSS? (being replaced with Shadow Parts)
Re:TailwindCSS v2.0 by wishinghand on Wednesday November 18, 2020 @06:21PM (#25143997)
> It lets you move all of those excessive class attributes into your CSS

If only CSS had thought to include such a feature.

Re:TailwindCSS v2.0 by rvense on Thursday November 19, 2020 @03:07AM (#25147261)
Yeah, Tailwind uses postcss to let you use its utility classes with the normal way of doing abstractions in CSS - but it also promotes using Javascript component frameworks where that makes sense.

The utility classes are in themselves great. It's a complete set but it still promotes thinking in design systems.

CSS classes are good, but should be used in moderation. Since you're likely using a component framework anyway, you can often just use the utility classes directly in your components with no loss of clarity and without repeating yourself. But when you do end up repeating yourself in the CSS, you can reach for postcss's @apply and have access to Tailwind's design system. The three levels work extremely well together.

Re:TailwindCSS v2.0 by rubans on Wednesday November 18, 2020 @03:31PM (#25142075)
Yes but you shouldn't do that really. You should use a view templating system instead to recycle the patterns you spot, e.g. button.tpl would contain the abstraction of classes.

The moment you collapse the classes in to a single class you're back to square one and the reason functional CSS arose be first place.

Adam Wathan promotes this pattern himself in this video.

https://youtu.be/J_7_mnFSLDg

Re:TailwindCSS v2.0 by nfRfqX5n on Wednesday November 18, 2020 @03:17PM (#25141889)
using @apply adds all of those properties and values into a new css class right? you're adding extra lines to your bundle
Re:TailwindCSS v2.0 by cosmotic on Wednesday November 18, 2020 @02:41PM (#25141426)
At that point, what is tailwind offering?
Re:TailwindCSS v2.0 by timdorr on Wednesday November 18, 2020 @02:45PM (#25141486)
Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way.

You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including computed values (color variants).

Re:TailwindCSS v2.0 by chrisan on Wednesday November 18, 2020 @02:52PM (#25141595)
How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?
Re:TailwindCSS v2.0 by JxLS-cpgbe0 on Wednesday November 18, 2020 @07:17PM (#25144576)
Or the utility classes in Bootstrap?