MERN Stack શીખવાનો ૪૫મો દિવસ

MERN Stack શીખવાનો ૪૫મો દિવસ

હું ફૂલ-સ્ટેક એન્જિનિયર બનવાની મારી સફરમાં 45 દિવસ પૂરા કરી રહ્યો છું.

ગઈકાલે, મેં Express routing સાથે સ્ટેટિક HTML પેજ સર્વ કરતા શીખ્યું. આજે, મેં Tailwind CLI નો ઉપયોગ કરીને Tailwind CSS માં નિપુણતા મેળવી.

હું મોટી CSS ફાઇલોનો ઉપયોગ કરવાનું છોડી રહ્યો છું. લેઆઉટ ઝડપથી બનાવવા માટે હું યુટિલિટી-ફર્સ્ટ (utility-first) વર્કફ્લો તરફ વળી રહ્યો છું.

Tailwind પહેલેથી બનેલા ઘટકો (components) પૂરા પાડતું નથી. તે નાની યુટિલિટી ક્લાસ (utility classes) પૂરી પાડે છે. આ ક્લાસ તમને સીધા તમારા HTML માં કસ્ટમ ડિઝાઇન બનાવવાની મંજૂરી આપે છે.

મારી ટેકનિકલ પ્રક્રિયા અહીં છે:

• મેં CDN લિંકનો ઉપયોગ કરવાને બદલે npm નો ઉપયોગ કરીને Tailwind ઇન્સ્ટોલ કર્યું.
• મેં npm install -D tailwindcss સાથે કમ્પાઈલર કોર ઇન્સ્ટોલ કર્યું.
• મેં npx tailwindcss init સાથે કોન્ફિગરેશન ઇનિશિયલાઇઝ કર્યું.

મેં એ પણ શીખ્યું કે Tailwind કેવી રીતે tree-shaking દ્વારા ફાઇલની સાઈઝ ઘટાડે છે. આ પ્રક્રિયા બિનઉપયોગી સ્ટાઇલ્સને દૂર કરે છે. મેં મારા કન્ટેન્ટ પાથ (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