ali parvizi Asked: 2024-05-04 03:08:07 +0800 CST2024-05-04 03:08:07 +0800 CST 2024-05-04 03:08:07 +0800 CST 如何在 tailwind-css 中自定义主题选择器 772 我想从深色主题开始,然后通过添加选择器添加浅色light:。可以做这样的事情吗? <div class="bg-black light:bg-red-300 py-6"> ... </div> 我读到了有关此插件的信息,但它不是我想要的 next.js 1 个回答 Voted Best Answer Wongjn 2024-05-04T03:34:29+08:002024-05-04T03:34:29+08:00 您可以考虑使用 Tailwind 插件来注册自定义静态变体。例如,如果light要由某个父类标识light,您可以这样做: const plugin = require('tailwindcss/plugin') module.exports = { // … plugins: [ plugin(function({ addVariant }) { addVariant('light', '.light &'); }), ], }; 然后,这将允许您使用类名light:bg-red-300,这样会生成 CSS,如下所示: .light .light\:bg-red-300 { … } dark:或者,如果您想要与其媒体查询版本相反的内容,您可以这样做: const plugin = require('tailwindcss/plugin') module.exports = { // … plugins: [ plugin(function({ addVariant }) { addVariant('light', '@media (prefers-color-scheme: light)'); }), ], }; 这会生成: @media (prefers-color-scheme: light) { .light\:bg-red-300 { … } } 不过实际上,如果您只想要一个在“非黑暗”时应用的变体,您可以考虑稍微修改一下您的类的逻辑: <div class="dark:bg-black bg-red-300 py-6">
您可以考虑使用 Tailwind 插件来注册自定义静态变体。例如,如果
light
要由某个父类标识light
,您可以这样做:然后,这将允许您使用类名
light:bg-red-300
,这样会生成 CSS,如下所示:dark:
或者,如果您想要与其媒体查询版本相反的内容,您可以这样做:这会生成:
不过实际上,如果您只想要一个在“非黑暗”时应用的变体,您可以考虑稍微修改一下您的类的逻辑: