tailwind の base 設定から一部をリセットする方法

メインとなる css に、@tailwind base ってやって preflight を使用すると、リスト形式が list-style: none に設定される。これだとブラウザ固有の違いを出さないように、リストの黒丸とか数字が出なくなる。

検索してすぐに出てくるドキュメント等では、各々の <ul> 等で list-style: 'dics' 等に設定してやれと書いてあるのは見かけるのだけれど、これだと１つずつのタグに設定してやらねばならない。

自分のやりたいのは、CMS から引っ張ってきた html を React に流すことだったので、全体の設定を直さないとダメ。

preflight でやられてる全体の設定を変えるのは、base を読み込んだ css に書き込めば良いと言うのが分かったのだけど(tailwind.config.js ではなく)、以下のように list-type: disc とかやると、深いレベルのリストにも全部同じ黒丸ポチが付いて見にくい。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    ol {
        list-style: disc
}

tailwind 側で設定を外す何かがあるかと思っていたのだけど、結局 css の revert が正解みたい。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    ol {
        list-style: revert
}

これでブラウザのデフォルトに戻って、レベルの深くなったリストの各々に違うポチマークが付いた。