我想让这样的事情成为可能:
<div
class="overflow-scroll h-screen antialiased ..."
class:whiteTheme="bg-gray-100 text-gray-800 ..."
class:darkTheme="bg-blue-900 ..."
>
...
</div>
因此,将始终应用一组类。一组仅当whiteTheme
为真,另一组仅当darkTheme
为真。
我知道我可以定义一个whiteTheme
和一个darkTheme
css 类并让它像那样工作
<div
class="overflow-scroll h-screen antialiased ..."
class:whiteTheme
class:darkTheme
>
但关键是我想单独设计每个元素(尤其是在我的应用程序的开始阶段)。并且必须为不同类中的每个元素定义我的类集......对我来说违背了使用 Tailwind.css 和试验特定元素的目的(无需在 css 定义和元素定义之间来回跳转)。
我可以选择的另一种方式是:
<div
class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">
这还不错,但我希望通过在单独的属性中定义事物来提高可读性和可维护性......
所以我想知道是否有办法让它按照我想要的方式工作......例如,我可以轻松地扩展 Svelte 编译器吗?
最好的约翰内斯