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

The backdrop filter will not work if the parent has a backdrop-filter effect as well.

issue — workaround

pre overflow: scroll inside flex

Have you ever used overflow-x: scroll on the pre element but it doesn't affect, even the parent that has the scroll?

Maybe the parent is display: flex. If so, try adding min-width: 0 to the parent.

Credit

import mdx file sebagai component

Import the mdx file in the component, the way is similar to normal component import:

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

// Usage
<Contents />

Turns out it's in the documentation. Get used to reading first, guys, don't be like me.

:not() pseudo-class

This :not() package is quite tricky, the wrong use can also result in not as expected.

For example, inline styling code which is not children of pre or .code-block. Its use:

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

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

Turborepo dependsOn

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

dependsOn with ^ indicates a task from another package, while the one without ^ is a task from the package itself.

For example: when app A wants to build, it must run tasks lint in all its package dependencies, and it must also run task test app A itself.

e.target.valueAsNumber

Use e.target.valueAsNumber to automatically return the input value as a number. No need for parseInt(e.target.value) anymore.