À 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.js

const 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/",
  },