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

MERN Stack నేర్చుకోవడంలో 45వ రోజు

నా ఫుల్-స్టాక్ ప్రయాణంలో నేను 45వ రోజులో ఉన్నాను.

నిన్న నేను స్టాటిక్ HTML పేజీల కోసం Express routing గురించి నేర్చుకున్నాను. ఈరోజు నేను Tailwind CSS పై దృష్టి పెట్టాను.

నేను పెద్ద CSS ఫైళ్లను వాడటం మానేశాను. ఇప్పుడు నేను utility-first workflowని ఉపయోగిస్తున్నాను. ఇది డిజైన్ పనిని వేగవంతం చేస్తుంది.

Tailwind మీకు utility classes అందిస్తుంది. మీ HTMLలోనే నేరుగా కస్టమ్ లేఅవుట్‌లను నిర్మించడానికి మీరు ఈ క్లాస్‌లను ఉపయోగిస్తారు.

నా సాంకేతిక ప్రక్రియ ఇక్కడ ఉంది:

• నేను CDN కి బదులుగా npm ప్యాకేజీలను ఉపయోగించి Tailwindని ఇన్‌స్టాల్ చేశాను.
• నేను npm install -D tailwindcss తో కంపైలర్ కోర్‌ని ఇన్‌స్టాల్ చేశాను.
• నేను npx tailwindcss init తో కాన్ఫిగరేషన్‌ను సెటప్ చేశాను.

Tailwind ఫైల్ పరిమాణాన్ని ఎలా తగ్గిస్తుందో కూడా నేను నేర్చుకున్నాను. ఇది ఉపయోగించని స్టైల్స్‌ను తొలగించడానికి tree-shakingని ఉపయోగిస్తుంది.

నా HTML మరియు JS ఫైల్‌లను స్కాన్ చేయడానికి నేను 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