I feel it's not by accident you don't understand it. The documentation says that it's heavily inspired by TailwindCSS and calls itself utility-first. However if you've used TailwindCSS or most other utility-first frameworks, you'll find it's not the same (which is ok, but does not get clarified).

Pollen uses css variables as the utilities in "utility-first", not classes. So to better understand the docs, take a look at the usage of css variables.

Utility-first as used by the most other frameworks (like Tailwind), are based on AtomicCSS. The concept behind it being, as atomic implies, using single irreducible units for each class (a single style). This site[1] provides curated reading resources on the topic. While it is a new concept and still being defined, use of classes as the utilities is the more commonplace usage, hence if writing a framework that does not do that I feel one should make that clear.

This means that the Introducing Pollen page will be confusing by design, as it implies use of utility-first CSS but the first example shows a Boostrap-like `.button`. Most other examples on the site also show 1 style classes, also misleading on the classes actually being "atomic".

In summary, Pollen is a framework that uses css variables[2] as the utilities. I like what it's doing and watching to see it grow. To better understand the value provided I'd recommend this video[1] on CSS variables, and this framework being a rapid prototyping foundation using the same concepts.

[1] https://johnpolacek.github.io/the-case-for-atomic-css/

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...

[3] https://www.youtube.com/watch?v=LwYZTKxj-do