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

Sono al giorno 45 del mio percorso full-stack.

Ieri ho imparato il routing di Express per le pagine HTML statiche. Oggi mi sono concentrato su Tailwind CSS.

Ho abbandonato i grandi file CSS. Ora utilizzo un workflow utility-first. Questo rende il lavoro di design più veloce.

Tailwind fornisce classi utility. Si utilizzano queste classi per costruire layout personalizzati direttamente nel proprio HTML.

Ecco il mio processo tecnico:

  • Ho installato Tailwind utilizzando i pacchetti npm invece di un CDN.
  • Ho installato il core del compilatore con npm install -D tailwindcss.
  • Ho configurato l'impostazione con npx tailwindcss init.

Ho anche imparato come Tailwind riduca la dimensione dei file. Utilizza il tree-shaking per rimuovere gli stili non utilizzati.

Ho configurato il percorso del contenuto in tailwind.config.js per scansionare i miei file HTML e JS:

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

Questa configurazione assicura che il mio file CSS finale rimanga piccolo e veloce.

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