𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

𝗝𝗼𝘂𝗿 𝟰𝟱 𝗱𝗲 𝗹'𝗮𝗽𝗽𝗿𝗲𝗻𝘁𝗶𝘀𝘀𝗮𝗴𝗲 𝗱𝗲 𝗹𝗮 𝘀𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡

Cela fait 45 jours que j'ai commencé mon parcours pour devenir ingénieur full-stack.

Hier, j'ai appris à servir des pages HTML statiques avec le routage Express. Aujourd'hui, j'ai maîtrisé Tailwind CSS en utilisant la CLI de Tailwind.

Je m'éloigne des fichiers CSS volumineux. Je passe à un flux de travail "utility-first" pour construire des mises en page plus rapidement.

Tailwind ne fournit pas de composants pré-faits. Il propose de petites classes utilitaires. Ces classes vous permettent de créer des designs personnalisés directement dans votre HTML.

Voici mon processus technique :

• J'ai installé Tailwind via npm au lieu d'utiliser un lien CDN.
• J'ai installé le cœur du compilateur avec npm install -D tailwindcss.
• J'ai initialisé la configuration avec npx tailwindcss init.

J'ai également appris comment Tailwind réduit la taille des fichiers grâce au tree-shaking. Ce processus supprime les styles inutilisés. J'ai configuré mes chemins de contenu pour que le compilateur scanne mes dossiers statiques.

Ma configuration tailwind.config.js :

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Cette configuration garantit que mon fichier CSS final reste léger et rapide.

Source : https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3