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 the parent ended up scrolling instead?

The parent is likely inside display: flex. If so, add min-width: 0 to the parent.

Credit

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

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

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

// Usage
<Contents />

It’s actually in the documentation. Get used to reading first, unlike me lol.

:not() pseudo-class

Using :not() can be a bit tricky; incorrect usage may 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 ^ refers to tasks from other packages, while without ^ refers to tasks from the current package.

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