𝗦𝗶𝗸𝘂 ya 𝟰𝟱 ya Kujifunza MERN Stack

Niko siku ya 45 ya safari yangu ya full-stack.

Jana nilijifunza Express routing kwa ajili ya kurasa za HTML tuli (static). Leo nilijikita kwenye Tailwind CSS.

Nimeacha kutumia faili kubwa za CSS. Sasa ninatumia mfumo wa kazi wa utility-first. Hii inafanya kazi ya usanifu (design) kuwa ya haraka zaidi.

Tailwind inakupa utility classes. Unatumia madarasa haya kujenga mpangilio maalum (custom layouts) moja kwa moja kwenye HTML yako.

Huu hapa ni mchakato wangu wa kiufundi:

  • Nilisanikisha Tailwind kwa kutumia npm packages badala ya CDN.
  • Nilisanikisha compiler core kwa kutumia npm install -D tailwindcss.
  • Niliweka mipangilio kwa kutumia npx tailwindcss init.

Pia nilijifunza jinsi Tailwind inavyopunguza ukubwa wa faili. Inatumia tree-shaking kuondoa mitindo (styles) isiyotumika.

Niliweka njia ya maudhui (content path) kwenye tailwind.config.js ili kuskani faili zangu za HTML na 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