Tailwind CSSAdvanced

Production Optimization

Tailwind CSS-কে production-এ optimize করুন — minification, tree-shaking, CSS purge।

11টি অংশবাংলা ভাষায়

Production build-এ Tailwind CSS-কে optimize করা গুরুত্বপূর্ণ। এতে CSS file size ছোট এবং performance ভালো থাকে।

Production Features

JIT Engine — শুধু ব্যবহৃত CSS generate হয়
PurgeCSS — unused CSS classes remove হয়
Minification — CSS file minify হয়
Tree-shaking — unused utilities বাদ যায়

Build Command

Terminalbash

bash

# Tailwind v4
npx @tailwindcss/cli -i ./src/index.css -o ./dist/output.css --minify

# Build script
npm run build

PurgeCSS Configuration (v3)

Tailwind v3-তে tailwind.config.js-তে content paths দিতে হয়। v4-তে auto-detection আছে।

tailwind.config.js (v3)javascript

javascript

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
};

Performance Tips

Production-এ CDN ব্যবহার করবেন না — npm build ব্যবহার করুন
Dynamic class names avoid করুন (template literal এ classes)
safelist শুধু প্রয়োজনীয় classes-এর জন্য ব্যবহার করুন
CSS file minify করুন

Dynamic Classes এড়িয়ে চলুন

Tailwind JIT engine static string scan করে। Dynamic class construction (text-${color}-500) কাজ করবে না। সবসময় static full class names ব্যবহার করুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।