New blog post: Tailwind vs semantic CSS

[tipiirai]

Check out:

https://nuejs.org/blog/tailwind-vs-semantic-css/

[felix-bohlin]

I thought it was very interesting when you pointed out the future technical debt Tailwind could become. Haven't really considered that viewpoint.

[tipiirai]

That is certainly a risk. We might look back at the odd-looking, highly verbose TW syntax after a few years and think... oh, we did that?! There are way fewer risks by sticking closer to standards and using CSS as intended.

[felix-bohlin]

Well the problem as I see it is to get people to care about CSS. Most devs just doesn't seem interested, but maybe it has to come to this to get people to change their minds, I'm not sure.

[tipiirai]

Agreed. That's a challenge, for sure. One strategy is to provide high quality templates with stellar design.

[siduck]

i agree with the tailwind points. Although I use unocss which seems better to me, especially some of its features like

1. Attributify plugin & valueless attributes

<div bg='red' border='1 solid blue'> 

instead of tailwind's className='border-1 border-solid border-blue`

it gets cleaner with valueless attributes, like

Another thing i like about this is that the responsive related classes are easy to use, like

<div lg="bg-red p5" p10> or <div p="lg:5 10">

2. Shortcuts , along with tagify plugin

here shortcuts could be used as classname / tag name, like

<card><card/> <full-overlay> <full-overlay/> would be valid and still work !

you can even compile the classes into 1

Imo unocss can be a lot more cleaner than tailwind, I like styling in the markup cuz its easy to make responsive quick

[tipiirai]

So Uno is similar to Daisy UI or Tailwind @apply for those who attempt to get benefits of both utility classes and semantic naming? Perhaps smaller in scope than Daisy?

[siduck]

@tipiirai unocss is an alternative to tailwind, its just that you get more powers that lead to cleaner syntax via its plugins, unlike with tailwind.

[tipiirai]

More powerful and cleaner syntax — that's all we need! Uno CSS sounds like semantic CSS then.

[eweren]

@siduck you are right. The --at-apply UnoCSS I mentioned can be done in a similar way (@apply which will also work work with uno) with tailwind.
While you can use @apply in plain css files it will not work in svelte files or other framework markup file styles-blocks because it is tailwind specific syntax and will not work from within those style blocks. UnoCSS instead is using the cssvar systax (as fallback) and therefore it works in those files too. Maybe it was because of that why I forgot that tailwind got this functionality too 😅

[siduck]

@eweren @apply works in css files for svelte for me if i load the css file in the main layout.svelte file!

with unocss we get tailwind's functionalities as well as some goodies like class attributes & tagify plugin! you can compile all of its classes into one single class too but youve to mention class=":uno: text-lg but its too much of work to do it for every class lol

@tipiirai it'd be great if nue could allow usage of custom tag names which are named after class names. Unocss does that with unocss shortcuts like

if a shortcut's like overlay: "h-full absolute inset-0 bg-white" , it could be used as <overlay></overlay> , But the caveat for this is that if in future if html introduces same tag names then it'd be a problem! unocss could just compile those classnames into <div class='overlay'> but it doesnt

also its attributes can be used with the custom tags, like

<overlay bg='blue lg:red' xl="p5>

[inwardmovement]

Maybe someday we'll see something that allows us to use Tailwind in dev, but that translates to "optimized HTML/CSS" at build time, to get around the blotted HTML/CSS argument of the blog post... best of both worlds (if one doesn't want to deal with naming/organizing CSS).

[tipiirai]

Nue will support Tailwind in the future in such a way that the production CSS is stripped out of unused class names. Of course, Tailwind can never beat well-structured semantic CSS regarding file size, even with optimization. I expect that Tailwind developers have optimized the Spotlight template being compared on the article.

[felix-bohlin]

Doesn't the Tailwind JIT-compiler already do that? Or is it on a per project basis and not per page/component basis?

[inwardmovement]

Doesn't the Tailwind JIT-compiler already do that? Or is it on a per project basis and not per page/component basis?

No it doesn't reorganise all your CSS and rename your classes like it's showed in the article.

[felix-bohlin]

Sorry, it was in response to:

Nue will support Tailwind in the future in such a way that the production CSS is stripped out of unused class names.

But maybe I have it the wrong way around here too.

[inwardmovement]

Sorry, it was in response to:

Nue will support Tailwind in the future in such a way that the production CSS is stripped out of unused class names.

Oh sorry! Yes the last version of Tailwind only includes the used classes by default.

[felix-bohlin]

Maybe you've explained that somewhere, but what is your vision for Nue CSS? We have Open Props all the way to UnoCSS, but I'm not sure really what problems you're aiming to solve apart from pushing it closer to standards.

[siduck]

@felix-bohlin many like tailwind because it lets you do styling in the markup file itself, therefore reducing dev time on opening other css files by a lot. I'd still go for unocss as it lets you do what tailwind does but with more plugins as goodies making a clean experience unlike tailwind

[felix-bohlin]

Yes for sure, I agree - UnoCSS does a lot of things right, but since the roadmap includes a CSS design system I'm curious how that will differ from what exists today. Maybe I understood it wrong somehow, but either way I'm curious for some clarification.

[tipiirai]

Roughly: Nue CSS is a design system for both multi- and single-page applications. It lets you take advantage of both CSS-in-JS and external/cascaded CSS. ie. take advantage of different cascade layers (root > area > page) without the issues of the global namespace. A little abstract at this point, but it will all make sense once released.