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 will not work if the parent also has a backdrop-filter effect.

issue — workaround

pre overflow: scroll inside flex

Ever used overflow-x: scroll on a pre element but it didn’t work, and instead the parent ended up scrolling?

The parent might be inside a display: flex. If so, try adding min-width: 0 to the parent.

Credit

import mdx file sebagai component

Import an MDX file in a component, similar to importing a regular component:

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

// Usage
<Contents />

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

:not() pseudo-class

Using :not() can be tricky, and incorrect usage can lead to unexpected results.

Example: styling inline code that is not a child of pre or .code-block. Usage:

: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 tasks from other packages, while without ^ indicates tasks from the same package.

Example: when app A builds, it must run the lint tasks in all its dependency packages, and also run the test task in 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.