🌤️ “Zịt ngộ ra…”

Zịt nghĩ quặk quặk, hoá ra lại quắk quắk.

Tailwind SVG không đổi màu khi hover – lỗi ở đâu?

#tailwindcss
#svg
#hover

Hôm nay gỡ được một con bug khó chịu: SVG trong Tailwind dùng group-hover:text-* không đổi màu như mong muốn, dù đã gán fill="currentColor" và đặt group đúng chỗ.

Hóa ra text-* không ảnh hưởng tới fill của SVG đâu nhé. Muốn đổi màu fill khi hover thì phải dùng fill-* hoặc group-hover:fill-*.

✅ Cách đúng:

<span class="group">
  <svg class="w-3 h-3 fill-gray-200 group-hover:fill-[#d98a5e]" viewBox="0 0 10 16">
    <path d="..." />
  </svg>
</span>
HTML
UTF-8

🚫 Cách sai (sẽ không đổi màu):

<svg class="text-gray-200 group-hover:text-[#d98a5e]"></svg>

Chốt lại: text-color ≠ fill-color trong SVG. Nhớ gọi đúng người để thả màu vào con tim con SVG! 🖌️

Tailwind Fill Docs

Tailwind CSS !important modifier

#tailwindcss
#css

Hôm qua gõ một dòng CSS tưởng bình thường, ai ngờ debug 3 tiếng mới phát hiện: Tailwind có ! modifier đấy ông cháu ạ!

Dùng ! đầu class để biến utility thành important:

<p class="font-bold !font-medium">
  Text này sẽ medium dù bold viết sau.
</p>
HTML
UTF-8

Lúc crush rep tin nhắn bằng chữ thường, mình rep lại bằng !uppercase cũng không ngầu bằng dòng code này.

Official Docs

nested backdrop-filter

#css

Câu chuyện là làm một modal trong modal, dùng backdrop-filter cho cả hai. Kết quả? Trắng bệch như tâm trạng tôi khi gửi CV không rep.

Turns out: Chrome không support nested backdrop-filter! Nếu parent đã có filter, child sẽ ngơ ngác như crush khi mình ngỏ lời.

issue — workaround

pre overflow: scroll inside flex

#css
#pre
#flex

Dựng blog xịn xò, thấy code block không scroll. Tưởng do thiếu caffeine, ai ngờ là do thiếu min-width: 0.

Cứ để pre trong flex mà thiếu dòng này thì scroll sẽ như cuộc tình không rõ ràng – không đi đến đâu.

Credit

import mdx file sebagai component

#react
#mdx

Cứ tưởng MDX là chỉ viết doc, ai dè import vào như component React luôn:

import Contents from '@/mdx/Contents.mdx';

<Contents />

Lúc biết điều này, mình đã run ra quán trà sữa và nói với chị bán hàng: "Cho em một ly MDX component không đá!"

Doc gốc

:not() pseudo-class

#css
#selector

Dùng :not() mà tách selector ra như chia tay mối tình đầu thì chỉ có bug.

Cách đúng là gom lại – giống như gom hết dũng khí confess:

Don't
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
Do
:not(pre, .code-block) {
  > code {
    background-color: 'red';
  }
}

Turborepo dependsOn

#turborepo
#monorepo
"build": {
  "dependsOn": ["^lint", "test"]
},

^ là chạy task của package khác – như kiểu bạn phải kiểm tra assignment nhóm trước khi nộp phần mình. Còn không có ^ là task local – như dọn phòng riêng.

e.target.valueAsNumber

#html
#js

Đôi khi chỉ cần một dòng code là đủ để trái tim frontend developer rung rinh:

e.target.valueAsNumber

Không còn parseInt, không còn lỗi NaN khi nhập số. Giống như khi bạn hiểu được ý crush qua ánh mắt – ngắn gọn, rõ ràng, chính xác.