Today I Learned

Tailwind CSS !important modifier

Make any utility important by adding a ! character to the beginning:

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

Official Docs

nested backdrop-filter

Backdrop filter tidak akan berhasil jika parent memiliki efek backdrop-filter juga.

issue — workaround

pre overflow: scroll inside flex

Pernah pake overflow-x: scroll pada pre element tapi ngga ngaruh, malah parent yang ada scrollnya?

Mungkin parentnya didalem display: flex. Kalau iya, coba tambahin min-width: 0 pada parentnya.

Credit

import mdx file sebagai component

Import mdx file di component, caranya mirip seperti import component biasa:

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

// Penggunaan
<Contents />

Ternyata ada di dokumentasinya. Biasakan membaca dulu ya gais jangan kaya saya wkwk.

:not() pseudo-class

Pake :not() ini emang agak tricky, salah penggunaan hasilnya juga bisa ngga sesuai harapan.

Contoh, styling inline code dimana bukan children dari pre ataupun .code-block. Penggunaannya:

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

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

Turborepo dependsOn

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

dependsOn dengan ^ menandakan task dari package lain, sedangkan yang tanpa ^ task dari package itu sendiri.

Misal: app A pas mau build harus running tasks lint di semua package dependenciesnya, dan juga harus running task test app A itu sendiri.

e.target.valueAsNumber

Pakai e.target.valueAsNumber untuk otomatis mengembalikan nilai input sebagai number. Tidak perlu parseInt(e.target.value) lagi.