#JaiLu la documentation de UnoCSS.

• Why UnoCSS?

Tailwind CSS is a PostCSS plugin, while UnoCSS is an isomorphic engine with a collection of first-class integrations with build tools (including a PostCSS plugin). This means UnoCSS can be much more flexible to be used in different places (for example, CDN Runtime, which generates CSS on the fly) and have deep integrations with build tools to provide better HMR, performance, and developer experience (for example, the Inspector).

-- Why UnoCSS?

Si je souhaite utiliser UnoCSS tout en conservant une compatibilité Tailwind CSS je dois utiliser Uno preset :

This preset is compatible with Tailwind CSS and Windi CSS, you can refer to their documentation for detailed usage.

#JaiDécouvert les features innovantes de UnoCSS :

• "attributify mode"

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Est l'équivalent de :

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

• Tagify mode

<text-red> red text </text-red>
<flex> flexbox </flex>
I'm feeling <i-line-md-emoji-grin /> today!

Est l'équivalent de :

<span class="text-red"> red text </span>
<div class="flex"> flexbox </div>
I'm feeling <span class="i-line-md-emoji-grin"></span> today!

Je trouve ces syntaxes élégantes, mais, à ma connaissance, elles sont très peu courantes. Si je me mets à la place d'un développeur "onbordé" dans un nouveau projet utilisant le "attributify mode" et Tagify mode, je crains que cela puisse être un choc pour lui. Il me faudrait probablement plusieurs semaines avant que mon cerveau s'habitue à interpréter automatiquement cette syntaxe.

Je me demande donc si le gain final est réellement positif ou négatif.

Pour le moment, j'ai décidé que n'utiliserait pas les fonctionnalités "attributify mode" et Tagify mode.

Ici j'ai écrit :

Genèse du projet :

Linktree was established in 2016, out of annoyance regarding social media that do not allow multiple hyperlinks in profiles. The site was created in six hours. It is reported to have gained 3,000 users overnight. (from)

#pensée : c'est tout le même fou qu'une limitation aussi basique — limitation du nombre de liens dans la section bio —, que je classe dans la catégorie des dark pattern, crée tout un marché ! #LeMondeEstFou (je ne suis pas le seul à penser cela)

Cela me fait penser à ce thread :

Several of the major social media platforms - Instagram, TikTok, LinkedIn, Twitter - have effectively declared war on linking to things and I absolutely hate it

"Link in my bio" / "Link in thread" / "Link in first comment"... or increasingly no link at all, just an unsourced screenshot of a page

“Link In Bio” is a slow knife

En raison entre autres de ce type de dark pattern je considère que #TikTok et #Instagram ne font pas partie du #Web.
Une des raisons qui explique pourquoi je n'ai jamais utilisé ces services.

The elemental UI component library for Svelte, built with UnoCSS and Melt UI.

https://ato-ui.vercel.app/

https://unocss.dev/

Voir aussi Tailwind CSS.