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

𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 ਸਿੱਖਣ ਦਾ 𝟰੫ਵਾਂ ਦਿਨ

ਮੈਂ ਆਪਣੀ ਫੁੱਲ-ਸਟੈਕ ਯਾਤਰਾ ਦੇ 45ਵੇਂ ਦਿਨ 'ਤੇ ਹਾਂ।

ਕੱਲ੍ਹ ਮੈਂ ਸਟੈਟਿਕ HTML ਪੇਜਾਂ ਲਈ Express routing ਸਿੱਖੀ। ਅੱਜ ਮੈਂ Tailwind CSS 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕੀਤਾ।

ਮੈਂ ਵੱਡੀਆਂ CSS ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਛੱਡ ਦਿੱਤੀ ਹੈ। ਹੁਣ ਮੈਂ utility-first workflow ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। ਇਸ ਨਾਲ ਡਿਜ਼ਾਈਨ ਦਾ ਕੰਮ ਤੇਜ਼ ਹੋ ਜਾਂਦਾ ਹੈ।

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

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

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

ਮੈਂ ਇਹ ਵੀ ਸਿੱਖਿਆ ਕਿ Tailwind ਫਾਈਲ ਦੇ ਆਕਾਰ ਨੂੰ ਕਿਵੇਂ ਘਟਾਉਂਦਾ ਹੈ। ਇਹ ਬੇਲੋੜੇ ਸਟਾਈਲਸ ਨੂੰ ਹਟਾਉਣ ਲਈ tree-shaking ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਮੈਂ ਆਪਣੀਆਂ HTML ਅਤੇ JS ਫਾਈਲਾਂ ਨੂੰ ਸਕੈਨ ਕਰਨ ਲਈ tailwind.config.js ਵਿੱਚ content path ਕੰਫਿਗਰ ਕੀਤਾ:

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

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

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