tailwindcss で odd:, even: が効かない

<tbody>
 <tr>
  <td class="odd:bg-gray200 even:bg-white">...</td> 
  <td class="odd:bg-gray200 even:bg-white">...</td> 
  <td class="odd:bg-gray200 even:bg-white">...</td> 
  <td class="odd:bg-gray200 even:bg-white">...</td> 
 </tr>
</tbody>

こんな感じで書いてテーブルの色を交互にしたいが、スタイルが効かない

解決策

tailwind.config.js の　variants.inset を下記のようにすればOK

tailwind.config.js

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
    inset: ['even', 'odd'],
  },
  plugins: [require('@themesberg/flowbite/plugin')],
};

参考