𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

I am on day 45 of my full-stack journey.

Yesterday I learned Express routing for static HTML pages. Today I focused on Tailwind CSS.

I moved away from large CSS files. I now use a utility-first workflow. This makes design work faster.

Tailwind gives you utility classes. You use these classes to build custom layouts directly in your HTML.

Here is my technical process:

• I installed Tailwind using npm packages instead of a CDN.
• I installed the compiler core with npm install -D tailwindcss.
• I set up the configuration with npx tailwindcss init.

I also learned how Tailwind reduces file size. It uses tree-shaking to remove unused styles.

I configured the content path in tailwind.config.js to scan my HTML and JS files:

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

This setup ensures my final CSS file stays small and fast.

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