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

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

J'en suis au 45ème jour de mon parcours full-stack.

Hier, j'ai appris le routage Express pour les pages HTML statiques. Aujourd'hui, je me suis concentré sur Tailwind CSS.

J'ai délaissé les fichiers CSS volumineux. J'utilise désormais un flux de travail utility-first. Cela accélère le travail de conception.

Tailwind fournit des classes utilitaires. On utilise ces classes pour construire des mises en page personnalisées directement dans le HTML.

Voici mon processus technique :

• J'ai installé Tailwind via des packages npm plutôt qu'un CDN.
• J'ai installé le cœur du compilateur avec npm install -D tailwindcss.
• J'ai configuré l'initialisation avec npx tailwindcss init.

J'ai aussi appris comment Tailwind réduit la taille des fichiers. Il utilise le tree-shaking pour supprimer les styles inutilisés.

J'ai configuré le chemin du contenu dans tailwind.config.js pour scanner mes fichiers HTML et 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