Chapter 16 — tailwind.config.js va Design Tokens

---

16.1 theme.extend

Example

script.js
JavaScriptNusxalash
01export default {
02  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
03  theme: {
04    extend: {
05      colors: { brand: { 500: '#7c3aed', 600: '#6d28d9' } },
06    },
07  },
08}

Mental Model

🧠 theme.extend — mavjud "ombor"ga yangi tovar qo'shish (mavjudlar saqlanadi). theme (extend'siz) — butun omborni yangisi bilan almashtirish (standart ranglar yo'qoladi).

16.2 content Maydoni va Arbitrary Values

Simple Explanation

Tailwind JIT engine faqat content ro'yxatidagi fayllarni skanerlaydi va topilgan klasslarnigina yakuniy CSS'ga qo'shadi.

Example

index.html
HTMLNusxalash
01<div class="w-[350px] bg-[#1a1a1a]">Arbitrary values</div>

⚠️ Common Mistake
content ro'yxatiga yangi papkani qo'shishni unutish — natijada u yerdagi klasslar production build'da ishlamay qoladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: O'zingizning "brand" rangingizni (HEX kod) config'ga qo'shing va bg-brand-500 sifatida ishlating.

🟡 Exercise 2 — Medium

Task: Custom font-family qo'shing (fontFamily.display) va uni sarlavhalarga qo'llang.

🔴 Exercise 3 — Hard

Task: To'liq mini design-token tizimi yarating: 3 ta custom rang, 1 ta custom font, 1 ta custom radius qiymati.

---

🐛 Debugging Challenge

script.js
JavaScriptNusxalash
01export default {
02  theme: {
03    colors: { brand: '#7c3aed' },
04  },
05}

index.html
HTMLNusxalash
01<div class="bg-blue-500">Test</div>

Your Task: Nega bg-blue-500 endi ishlamay qoldi?

<details> <summary>Solution</summary> `theme.colors` (extend'siz) butun standart rang palitrasini o'chirib, faqat `brand` rangini qoldirdi. Yechim: `theme.extend.colors` ichiga ko'chirish, shunda standart ranglar saqlanadi. </details>

---

📌 Chapter Summary

theme.extend — qo'shish, theme — almashtirish (standartni o'chiradi). content — JIT engine qaysi fayllarni skanerlashini belgilaydi, eng muhim sozlama.

🎯 Key Takeaways

• Har doim theme.extend ichida qo'shing, theme ichida emas
• content ro'yxatini yangi papka qo'shilganda yangilashni unutmang
• Arbitrary values ([]) faqat chegaraviy holatlar uchun

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01theme.extend.colors    → custom ranglar
02theme.extend.fontFamily → custom shriftlar
03Arbitrary: w-[350px], bg-[#hex]

---