Tutoriel CSS : UnoCSS

UnoCSS est un outil qui va vous permettre de générer des règles CSS utilitaires à la demande. Le principe est similaire à ce que propose des outils comme Tailwind CSS avec la possibilité de personnaliser en profondeur le processus de génération des règles CSS.

<button
  class="py-2 px-3 text-orange border-1 border-orange hover:(bg-orange text-white) transition"
>
  Je suis un bouton
</button>

Sommaire

00:00 Présentation & Installation
04:58 Création de règles
08:24 Création de racourcis
09:46 Génération d'icônes
12:25 Typographie
14:07 Police personnalisée
17:30 Style via des attributs
20:29 Groupement des variations
22:55 UnoCSS en ligne de commande
27:10 Les avantages
28:07 Les inconvénients

Différence avec Tailwind CSS

Au premier abord UnoCSS peut sembler similaire à Tailwind CSS pourtant l'approche est différente.

• UnoCSS est un moteur isomorphe qui peut être intégré dans différents outils là où TailwindCSS se repose sur l'outil PostCSS.
• La génération des règles est personnalisable et il est possible de créer des règles dynamiques spécifiques. Là où Tailwind impose des règles spécifiques.
• Il est possible de morceler son CSS de différentes manières (style dans les attributs, groupement des variantes...)

La flexibilité d'UnoCSS lui permet par exemple de disposer d'un préréglage qui assure une bonne compatibilité avec les classes de TailwindCSS donc vous n'êtes pas obligé d'apprendre de nouvelle conventions si vous connaissez déjà Tailwind.

Utilisation

UnoCSS peut être utilisé de différentes manières mais la plupart du temps on l'intégrera au processus de build (par exemple Vite).

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

Ensuite, dans notre script principal on importera le CSS (on peu aussi inclure un reset CSS en amont pour "retirer" les styles du navigateurs).

// main.js
import '@unocss/reset/tailwind.css'
import 'virtual:uno.css'

Maintenant on peut utiliser les classes utilitaires dans nos fichiers .jsx, .tsx, .vue, .md, .html, .svelte, .astro (il est possible d'ajouter d'autres extensions en modifiant la configuration).

<div class="h-full text-center flex select-none all:transition-400">
  <div class="ma">
    <div class="text-5xl fw100">
      Mon site
    </div>
    <div class="op30 text-lg fw300 m1">
      Bievenue sur mon site
    </div>
  </div>
</div>
<div class="absolute bottom-5 right-0 left-0 text-center color-white/30 fw300">
  Créé par <a href="https://grafikart.fr" class="color-white/60 underline">moi</a>
</div>

Lors du build le CSS sera généré en fonction des classes que vous utilisez et n'intégrera que les classes présentent dans votre code.

Et si on ne fait pas de JavaScript ?

Si vous développez un site sans bundler vous pouvez tout de même utiliser UnoCSS en générant le fichier CSS en ligne de commande.

unocss "views/**/*.php" "templates/**/*.twig"

Vous pouvez aussi utiliser le drapeau --watch pour que le fichier CSS soit généré à chaque changement.

Un moteur personnalisable

Le point fort d'UnoCSS réside dans sa personnalisation qui permet de créer des règles sur mesures. La configuration se fait au travers d'un fichier uno.config.ts dans lequel vous pouvez ajouter différentes options.

Règles personnalisées

L'option rules permet de définir des règles qui serviront à la génération de règles CSS.

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

Les règles peuvent aussi être dynamiques pour accepter des paramètres.

rules: [
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Pour plus d'information rendez vous sur la documentation à propos des règles.

Préréglages

Même s'il est intéressant de pouvoir créer ses propres règles, dans les faits on préfèrera se reposer sur un ensemble de règles déjà conçues. Pour importer ces règles UnoCSS dispose d'un système de presets.

En l'absence de configuration, le preset presetUno (une combinaison de @unocss/preset-wind and @unocss/preset-mini) est activé par défaut. Il contient un ensemble de règles compatibles avec Tailwind CSS et Windi CSS.

// uno.config.ts
import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})

Les règles présentent dans ce préréglage sont personnalisables à travers le système de theme.

Il existe aussi d'autre préréglages intéressants :

• Icons pour ajouter des icônes
• Typography qui ajoute une règle .prose pour styliser du contenu HTML (pratique pour du contenu provenant d'un éditeur visuel par exemple).
• Web Fonts pour gérer simplement l'import de police externes.
• Attributify qui permet d'ajouter des règles avec des attributs HTML (`
  ).

Transformers

Les transformers permettent d'appliquer des transformations dans le code pour simplifier l'écriture de certaines classes. Par exemple VariantGroup permet de regrouper les styles provenant d'une même variation.

<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Lors de la compilation, l'attribut classe sera transformé pour séparer les différentes classes.

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>

Cela permet d'éviter la répétition et de rendre le style un peu plus lisible.

Conclusion

Bien qu'il y ait quelques subtilités, notamment dans la partie preset, les différences avec Tailwind restent relativement légères. Cela permet d'utiliser un vocabulaire auquel on est déjà habitué. Si vous êtes amateur de Tailwind et que vous voulez passer à UnoCSS, vous n'avez pas besoin de tout réapprendre, ce qui est un avantage notable.

Un autre point intéressant est la possibilité de créer ses propres règles. Pour des projets qui utilisent beaucoup de classes utilitaires, l'outil permet de générer des classes sur mesure, ce qui est très pratique. La partie preset est également intéressante puisqu'elle permet d'ajouter de nouvelles fonctionnalités, comme les icônes ou la typographie. De plus, la fonction de regroupement des transformations est appréciable, surtout pour éviter les noms de classes trop longs, un problème fréquent avec Tailwind.

Attention à l'organisation

Cependant, UnoCSS présente aussi quelques inconvénients. Le premier réside dans la création de ses propres règles, qui conduit à une configuration spécifique à chaque projet. Le vocabulaire des classes utilitaires créées peut ne pas être partagé ou connu par d'autres développeurs, contrairement aux règles standardisées de Tailwind où tout le monde parle le même langage par exemple. Cela peut ajouter une certaine complexité.

Un autre inconvénient concerne la documentation. Bien que le système de documentation interactive soit intéressant, il ne couvre pas toutes les possibilités. Aussi, la découvrabilité des règles offertes par certains presets n'est pas forcément évident.

Enfin, l'utilisation des shortcuts dans UnoCSS peut aussi poser des problèmes. Cela peut éloigner l'utilisateur de l'approche des classes utilitaires, créant ainsi une confusion entre les classes utilitaires et sémantiques.

La flexibilité de la configuration, si mal géré peut être une lame à double tranchants.