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

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

Nimefikia siku 45 katika safari yangu ya kuwa mhandisi wa full-stack.

Jana, nilijifunza jinsi ya kutoa kurasa za HTML za static kwa kutumia Express routing. Leo, nimejifunza kwa ufasaha Tailwind CSS kwa kutumia Tailwind CLI.

Ninaacha kutumia faili kubwa za CSS. Ninahamia kwenye mfumo wa kazi wa utility-first ili kutengeneza layouts kwa haraka zaidi.

Tailwind haitoi vipengele (components) vilivyotengenezwa tayari. Inatoa madarasa madogo ya utility (utility classes). Madarasa haya hukuruhusu kutengeneza miundo ya kipekee moja kwa moja kwenye HTML yako.

Huu hapa ni mchakato wangu wa kiufundi:

• Nilisanikisha Tailwind kwa kutumia npm badala ya kutumia kiungo cha CDN.
• Nilisanikisha kiini cha compiler kwa npm install -D tailwindcss.
• Nilianzisha usanidi kwa npx tailwindcss init.

Pia nilijifunza jinsi Tailwind inavyopunguza ukubwa wa faili kupitia tree-shaking. Mchakato huu huondoa mitindo (styles) isiyotumika. Niliweka mipangilio ya njia za maudhui (content paths) ili compiler ikague folda zangu za static.

Mpangilio wangu wa tailwind.config.js:

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

Mpangilio huu unahakikisha faili langu la mwisho la CSS linabaki kuwa dogo na la haraka.

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