Tailwind CSSIntermediate

Tailwind Customization

Tailwind-এর theme, colors, spacing, fonts — সম্পূর্ণভাবে customize করুন।

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

Tailwind-এর default theme customize করা সম্পূর্ণ সম্ভব। Tailwind v4-তে এটি CSS-এই করা হয়, v3-তে tailwind.config.js-তে।

Tailwind v4: CSS-first Customization

Tailwind v4-তে @theme directive দিয়ে customize করুন।

src/index.csscss

css

@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand: #3b82f6;
  --color-brand-light: #93c5fd;
  --color-brand-dark: #1d4ed8;

  /* Custom fonts */
  --font-heading: "Inter", sans-serif;
  --font-body: "Nunito", sans-serif;

  /* Custom spacing */
  --spacing-18: 4.5rem;

  /* Custom border radius */
  --radius-card: 16px;
}

Tailwind v3: Config File

tailwind.config.js (v3)javascript

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: "#3b82f6",
          light: "#93c5fd",
          dark: "#1d4ed8",
        },
      },
      fontFamily: {
        heading: ["Inter", "sans-serif"],
        body: ["Nunito", "sans-serif"],
      },
    },
  },
};

Customization Options

বৈশিষ্ট্য	v4 Method	v3 Method
Colors	@theme { --color-* }	theme.extend.colors
Fonts	@theme { --font-* }	theme.extend.fontFamily
Spacing	@theme { --spacing-* }	theme.extend.spacing
Screens	@theme { --breakpoint-* }	theme.extend.screens
Animations	@theme { --animate-* }	theme.extend.animation

v3 vs v4 Customization

Tailwind v4-তে CSS-first approach ব্যবহার করা হয়, ফলে tailwind.config.js প্রয়োজন হয় না। পুরোনো v3 config file v4-তে migrate করার জন্য official documentation দেখুন।

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