pollen VS unocss

Curious to know if anyone has compared this to Pollen:

https://www.pollen.style/

I’ve used Pollen as an alternative to the bulk of Tailwind and have been very happy with it.

So frameworks like https://www.pollen.style/ are doing this. Personally I still prefer the tailwind approach.

I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].

[0] https://github.com/heybokeh/pollen

[1] https://github.com/argyleink/open-props

Tailwind is a great option to look into, I really enjoy it, but if you want something a bit more in-between, you can check out frameworks like https://www.pollen.style. There you get a framework of consistent CSS variables you can use, while still writing all your vanilla CSS yourself with full control of everything.

It uses UnoCSS (think TailwindCSS but super customizeable) with Pollen (which is similar to open props).

Very similar to Pollen (https://www.pollen.style), though it looks a little more complicated.

IMO the main value of Tailwind is that it's a step function over your units and colors, which helps bring better consistency and dev speed to UI implementation.

Tailwind's "write class names instead of CSS" approach makes sense in the component-based systems most apps are built in these days, where pretty much any repeated markup will be turned into a component. It performs better than scoped styles and is less complicated.

A CSS variable approach like Open Props or Pollen is, in my experience, better if you're not using a component-based system (ie. conventional HTML) and therefore have repeated markup patterns. Having a simple class name to apply to repeated markup is much more maintainable than trying to copy/paste a long tailwind string around.

Pollen and Open Props are two popular examples of such token first frameworks. If you are not familiar with CSS Custom Properties (also called CSS variables), I recently wrote about how to use them to create a CSS Style API layer.

In the last few years, a new set of frameworks with a radically different concept drew the attention of frontend developers. These frameworks are now extremely popular in the frontend world, and you’re likely already familiar with them: Tailwind CSS and Pollen.

As front-end development grows more complex, developers face increasing challenges with CSS frameworks. While Tailwind CSS has been a go-to solution for many teams, it comes with certain limitations that can impact development efficiency and performance. This guide explores how UnoCSS addresses these challenges and provides practical solutions with real-world examples.

I'm also considering rewriting the application with a framework like Nuxt or adding UnoCSS styles, just to play around with the technology and see what I can do. Hexo feels like it's not quite ready for production use in an enterprise context, but it's really straightforward to get up and running with for smaller groups and solo developers.

Yes: https://unocss.dev/

You can even use it directly in runtime

I wish tailwind would support attributify like https://github.com/unocss/unocss, which is much more readable for complex layouts:

  link

I feel the same about people praising Tailwind.

Tailwind (and similar, I tend to use https://unocss.dev/) is not good for your frontend architecture BUT they allow you to be so fast, that it negates the benefits.

For a job well done, I'd follow the principles of https://maintainablecss.com/

I think UnoCss is may be better than Tailwind already and has a good Vue integration https://unocss.dev/

The most popular tools that implement this approach are: Tailwind, WindiCSS, UnoCSS.

- UnoCSS: https://unocss.dev/