𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 ಕಲಿಯುವಿಕೆಯ ೪೫ನೇ ದಿನ
ನಾನು ನನ್ನ ಫುಲ್-ಸ್ಟಾಕ್ (full-stack) ಪ್ರಯಾಣದ 45ನೇ ದಿನದಲ್ಲಿದ್ದೇನೆ.
ನಿನ್ನೆ ನಾನು ಸ್ಟ್ಯಾಟಿಕ್ HTML ಪುಟಗಳಿಗಾಗಿ Express routing ಅನ್ನು ಕಲಿತೆ. ಇಂದು ನಾನು Tailwind CSS ಮೇಲೆ ಗಮನ ಹರಿಸಿದೆ.
ನಾನು ದೊಡ್ಡ CSS ಫೈಲ್ಗಳಿಂದ ದೂರ ಸರಿದಿದ್ದೇನೆ. ಈಗ ನಾನು utility-first workflow ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ. ಇದು ವಿನ್ಯಾಸದ ಕೆಲಸವನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ.
Tailwind ನಿಮಗೆ utility classes ನೀಡುತ್ತದೆ. ನಿಮ್ಮ HTML ನಲ್ಲಿ ನೇರವಾಗಿ ಕಸ್ಟಮ್ ಲೇಔಟ್ಗಳನ್ನು (custom layouts) ನಿರ್ಮಿಸಲು ನೀವು ಈ ಕ್ಲಾಸ್ಗಳನ್ನು ಬಳಸುತ್ತೀರಿ.
ನನ್ನ ತಾಂತ್ರಿಕ ಪ್ರಕ್ರಿಯೆ ಇಲ್ಲಿದೆ:
- ನಾನು CDN ಬದಲಿಗೆ npm ಪ್ಯಾಕೇಜ್ಗಳನ್ನು ಬಳಸಿ Tailwind ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿದೆ.
- ನಾನು
npm install -D tailwindcssಮೂಲಕ compiler core ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿದೆ. - ನಾನು
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