𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 నేర్చుకోవడంలో 𝟰𝟱వ రోజు

ఫుల్-స్టాక్ ఇంజనీర్ కావాలనే నా ప్రయాణంలో నేను 45 రోజులు పూర్తి చేసుకున్నాను.

నిన్న, నేను Express routing ద్వారా static HTML పేజీలను సర్వ్ చేయడం నేర్చుకున్నాను. ఈరోజు, Tailwind CLI ఉపయోగించి Tailwind CSS పై పట్టు సాధించాను.

నేను పెద్ద CSS ఫైళ్లకు దూరంగా వెళ్తున్నాను. లేఅవుట్‌లను వేగంగా నిర్మించడానికి నేను utility-first workflow కి మారుతున్నాను.

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

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

  • నేను CDN లింక్‌ను ఉపయోగించకుండా npm ద్వారా Tailwind ని ఇన్‌స్టాల్ చేశాను.
  • నేను npm install -D tailwindcss తో compiler core ని ఇన్‌స్టాల్ చేశాను.
  • నేను npx tailwindcss init తో configuration ని ప్రారంభించాను.

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

నా tailwind.config.js సెటప్:

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

ఈ సెటప్ వల్ల నా ఫైనల్ CSS ఫైల్ చిన్నదిగా మరియు వేగంగా ఉండేలా చూస్తుంది.

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