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

MERN Stack ਸਿੱਖਣ ਦਾ 45ਵਾਂ ਦਿਨ

ਮੈਂ ਇੱਕ ਫੁੱਲ-ਸਟੈਕ ਇੰਜੀਨੀਅਰ ਬਣਨ ਦੇ ਆਪਣੇ ਸਫ਼ਰ ਦੇ 45 ਦਿਨ ਪੂਰੇ ਕਰ ਲਏ ਹਨ।

ਕੱਲ੍ਹ, ਮੈਂ Express routing ਨਾਲ ਸਟੈਟਿਕ HTML ਪੇਜ ਸਰਵ ਕਰਨਾ ਸਿੱਖਿਆ। ਅੱਜ, ਮੈਂ Tailwind CLI ਦੀ ਵਰਤੋਂ ਕਰਕੇ Tailwind CSS ਵਿੱਚ ਮੁਹਾਰਤ ਹਾਸਲ ਕੀਤੀ।

ਮੈਂ ਵੱਡੀਆਂ CSS ਫਾਈਲਾਂ ਤੋਂ ਦੂਰ ਹੋ ਰਿਹਾ ਹਾਂ। ਮੈਂ ਲੇਆਉਟ (layouts) ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਲਈ utility-first ਵਰਕਫਲੋ (workflow) ਵੱਲ ਵਧ ਰਿਹਾ ਹਾਂ।

Tailwind ਪਹਿਲਾਂ ਤੋਂ ਬਣੇ ਹੋਏ ਕੰਪੋਨੈਂਟਸ (components) ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਛੋਟੀਆਂ utility classes ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਕਲਾਸਾਂ ਤੁਹਾਨੂੰ ਸਿੱਧੇ ਆਪਣੇ HTML ਵਿੱਚ ਕਸਟਮ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ।

ਇੱਥੇ ਮੇਰੀ ਤਕਨੀਕੀ ਪ੍ਰਕਿਰਿਆ ਹੈ:

• ਮੈਂ CDN ਲਿੰਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ Tailwind ਇੰਸਟਾਲ ਕੀਤਾ।
• ਮੈਂ npm install -D tailwindcss ਨਾਲ ਕੰਪਾਈਲਰ ਕੋਰ ਇੰਸਟਾਲ ਕੀਤਾ।
• ਮੈਂ npx tailwindcss init ਨਾਲ ਕੰਫਿਗਰੇਸ਼ਨ ਨੂੰ ਇਨੀਸ਼ੀਅਲਾਈਜ਼ ਕੀਤਾ।

ਮੈਂ ਇਹ ਵੀ ਸਿੱਖਿਆ ਕਿ Tailwind tree-shaking ਰਾਹੀਂ ਫਾਈਲ ਦੇ ਆਕਾਰ ਨੂੰ ਕਿਵੇਂ ਘਟਾਉਂਦਾ ਹੈ। ਇਹ ਪ੍ਰਕਿਰਿਆ ਅਣਵਰਤੀਆਂ ਸਟਾਈਲਜ਼ (unused styles) ਨੂੰ ਹਟਾ ਦਿੰਦੀ ਹੈ। ਮੈਂ ਆਪਣੇ content paths ਨੂੰ ਕੰਫਿਗਰ ਕੀਤਾ ਤਾਂ ਜੋ ਕੰਪਾਈਲਰ ਮੇਰੇ ਸਟੈਟਿਕ ਫੋਲਡਰਾਂ ਨੂੰ ਸਕੈਨ ਕਰ ਸਕੇ।

ਮੇਰਾ tailwind.config.js ਸੈੱਟਅੱਪ:

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

ਇਹ ਸੈੱਟਅੱਪ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਮੇਰੀ ਅੰਤਿਮ CSS ਫਾਈਲ ਛੋਟੀ ਅਤੇ ਤੇਜ਼ ਰਹੇ।

ਸਰੋਤ: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3