Tailwind CSSのimportant

Tailwind CSSにはimportantという属性を指定できる。

module.exports = {
  important: true,
}

これを指定することで、Tailwindのユーティリティクラスが!importantとして読み込まれるようになる。

type ImportantConfig = boolean | string

https://tailwindcss.com/docs/configuration#important

Tailwind CSSの型定義を参照すると、値としては公式ドキュメントに記載があるbooleanの他にstringも指定できる。

これも公式ドキュメントに記載があるが、important: trueとすると、MUIのようなインラインスタイルを要素に追加するライブラリとTailwindが競合する可能性がある。そこでimportant: #appのように、ID Selectorを値として指定することで、importantの適用範囲を限定することができるのだそう。

https://tailwindcss.com/docs/configuration#selector-strategy