MERN Stack ಕಲಿಯುವಿಕೆಯ 45ನೇ ದಿನ

ನಾನು ಫುಲ್-ಸ್ಟಾಕ್ ಇಂಜಿನಿಯರ್ ಆಗುವ ನನ್ನ ಪ್ರಯಾಣದಲ್ಲಿ 45 ದಿನಗಳನ್ನು ಪೂರೈಸಿದ್ದೇನೆ.

ನಿನ್ನೆ, ನಾನು Express routing ಬಳಸಿ ಸ್ಟ್ಯಾಟಿಕ್ HTML ಪುಟಗಳನ್ನು ಸರ್ವ್ ಮಾಡುವುದನ್ನು ಕಲಿತೆ. ಇಂದು, ನಾನು Tailwind CLI ಬಳಸಿ Tailwind CSS ನಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದಿದೆ.

ನಾನು ದೊಡ್ಡ CSS ಫೈಲ್‌ಗಳಿಂದ ದೂರ ಸರಿಯುತ್ತಿದ್ದೇನೆ. ಲೇಔಟ್‌ಗಳನ್ನು ವೇಗವಾಗಿ ನಿರ್ಮಿಸಲು ನಾನು utility-first ವರ್ಕ್‌ಫ್ಲೋಗೆ ಬದಲಾಗುತ್ತಿದ್ದೇನೆ.

Tailwind ಮೊದಲೇ ತಯಾರಿಸಿದ componentsಗಳನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ. ಇದು ಸಣ್ಣ utility ಕ್ಲಾಸ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಕ್ಲಾಸ್‌ಗಳು ನಿಮ್ಮ HTML ನಲ್ಲಿ ನೇರವಾಗಿ ಕಸ್ಟಮ್ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ.

ನನ್ನ ತಾಂತ್ರಿಕ ಪ್ರಕ್ರಿಯೆ ಇಲ್ಲಿದೆ:

  • ನಾನು CDN ಲಿಂಕ್ ಬಳಸುವ ಬದಲು npm ಬಳಸಿ Tailwind ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿದೆ.
  • ನಾನು npm install -D tailwindcss ಮೂಲಕ ಕಂಪೈಲರ್ ಕೋರ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿದೆ.
  • ನಾನು npx tailwindcss init ಮೂಲಕ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಿದೆ.

ಟ್ರೀ-ಶೇಕಿಂಗ್ (tree-shaking) ಮೂಲಕ Tailwind ಫೈಲ್ ಗಾತ್ರವನ್ನು ಹೇಗೆ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಸಹ ನಾನು ಕಲಿತೆ. ಈ ಪ್ರಕ್ರಿಯೆಯು ಬಳಕೆಯಾಗದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಕಂಪೈಲರ್ ನನ್ನ ಸ್ಟ್ಯಾಟಿಕ್ ಫೋಲ್ಡರ್‌ಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡುವಂತೆ ನಾನು ನನ್ನ ಕಂಟೆಂಟ್ ಪಾತ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿದೆ.

ನನ್ನ 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