À l’occasion de la « collection automne 2021 » de momh.fr, je me suis essayé à Tailwind CSS, le framework CSS qui renverse l’habituel mantra du CSS des classes sémantiques. Il m’a fallu un peu de temps avant de trouver une configuration satisfaisante, découvrant à cette occasion le postprocesseur CSS PostCSS.
Il faut commencer par installer nodejs et son gestionnaire de paquets npm ; plutôt que de passer par les dépôts Debian, on utilise les paquets proposés par NodeSource comme recommandé par la documentation de Node.js. Ainsi :
curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -
sudo apt-get install -y nodejs npm
on peut commencer par initier un projet avec la commande npm init.
Ensuite, il faut installer les paquets nécessaires :
npm install -D tailwindcss postcss postcss-cli postcss-easy-import autoprefixer cssnano watch
On génère ensuite automatiquement les fichiers de configuration minimalistes de PostCSS et de Tailwind CSS avec la commande suivante :
npx tailwindcss init -p
On peut ensuite éditer les fichiers tailwind.config.js et postcss.config.js, étant donné une arborescence comme celle qui suit :
|_ content
|_ truc.html
|_ machin.html
|_ css
|_ src
|_ _base.scss
|_ _cards.scss
|_ tailwind.scss
|_ tailwind.css
|_ inclure
|_ inclusion.html
|_ script.js
|_ index.html
On commence par peaufiner la configuration de PostCSS :
nano postcss.config.js
module.exports = {
plugins: {
'postcss-easy-import': {
path: ['./css/src'],
prefix: '_',
extensions: ['.css', '.scss']
},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}
Puis on s’attelle à la configuration de Tailwind CSS :
nano tailwind.config.jsconst defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./*.{html,js}",
"./content/*.{html,js}",
"./inclure/*.{html,js}",
],
theme: {
screens: {
'xs': '480px',
...defaultTheme.screens,
},
extend: {
fontFamily: {
'cursive': ['Life Savers', 'cursive'],
},
},
},
plugins: [],
}
On peut ensuite modifier la section « script » du fichier package.json avec les commandes permettant de compiler nos styles grâce à la commande npm run-script XXX :
"scripts": {
"styles:dev": "postcss css/src/tailwind.scss -o css/tailwind.css",
"styles:prod": "NODE_ENV=production postcss css/src/tailwind.scss -o css/tailwind.css",
"styles:watch": "watch 'npm run dev:scss' ../squelettes/",
},