𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
I am 45 days into my journey to become a full-stack engineer.
Yesterday, I learned to serve static HTML pages with Express routing. Today, I mastered Tailwind CSS using the Tailwind CLI.
I am moving away from large CSS files. I am switching to a utility-first workflow to build layouts faster.
Tailwind does not provide pre-made components. It provides small utility classes. These classes let you build custom designs directly in your HTML.
Here is my technical process:
- I installed Tailwind using npm instead of using a CDN link.
- I installed the compiler core with npm install -D tailwindcss.
- I initialized the configuration with npx tailwindcss init.
I also learned how Tailwind reduces file size through tree-shaking. This process removes unused styles. I configured my content paths so the compiler scans my static folders.
My tailwind.config.js setup:
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