Tailwindcss Just In Time (JIT)

Adam Wathan, le créateur de tailwindcss à annoncer aujourd'hui la sortie expérimental d'un compilateur temps réel pour sa librairie.

Il explique que l'une des contraintes les plus difficiles auxquelles ils ont du faire face pour l'amélioration du framework au fil des années était la taille conséquente du fichier css généré pendant le développement. Il nous montre, dans son annonce de sortie, qu'avec quelques modifications de configuration du fichier tailwind, le CSS peut rapidement atteindre 10Mo ou plus. En conséquence, les outils de build et les navigateur son fortement ralenti dû à cette taille.

Lien github : Tailwindcss JIT

Vous pouvez dès aujourd'hui l'essayer dans vos projet :

npm install -D @tailwindcss/jit tailwindcss postcss

Ensuite, mettez-le dans votre configuration PostCSS:

  // postcss.config.js
  module.exports = {
    plugins: {
      '@tailwindcss/jit': {},
      autoprefixer: {},
    }
  }

Configurer l'option purge dans votre fichier tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}