MERN Stack શીખવાનો ૪૫મો દિવસ
હું મારી ફૂલ-સ્ટેક સફરના ૪૫મા દિવસે છું.
ગઈકાલે મેં સ્ટેટિક HTML પેજ માટે Express routing શીખ્યું. આજે મેં Tailwind CSS પર ધ્યાન કેન્દ્રિત કર્યું.
હું મોટી CSS ફાઇલોના ઉપયોગથી હવે દૂર આવ્યો છું. હવે હું utility-first વર્કફ્લોનો ઉપયોગ કરું છું. આનાથી ડિઝાઇનનું કામ ઝડપી બને છે.
Tailwind તમને utility classes આપે છે. તમે આ ક્લાસનો ઉપયોગ સીધા તમારા HTML માં કસ્ટમ લેઆઉટ બનાવવા માટે કરી શકો છો.
મારી ટેકનિકલ પ્રક્રિયા અહીં છે:
- મેં CDN ને બદલે npm પેકેજનો ઉપયોગ કરીને 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