0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flowbiteを使ってStriped tableを作るときにodd, evenが効かない

Posted at

Flowbite(TailwindCSS Utility) × Laravelで、
以下のようなシマシマのStriped Tableを作ろうと、サンプルコードをコピーしましたが、
odd, evenが効かなかったのでその対処法です。
スクリーンショット 2022-04-14 10.04.14.png

対処法

以下のコードを追加することで解決しました!

tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'odd', 'even', hover', 'focus'],
  },
}

今回のケースは、そもそも、oddを使った記述がapp.cssにコンパイルされていませんでした。
これはFlowbiteの問題ではなく、Tailwindの設定の問題で、
Tailwindでは一部の擬似クラスは開発環境でのビルドでもcssファイルに取り込まれないため、
その設定を自分で書く必要があるとのことでした。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?