可复用性

我们编写原生CSS时,经常需要抽取一些通用的样式类,例如将一系列样式封装为btn-primary,后续涉及按钮的样式统一使用该CSS类,以避免重复的代码编写。但TailwindCSS提供的是原子类,我们如何抽取并复用呢?TailwindCSS提供了一些自定义指令解决这个问题。

抽取通用组件

下面例子中展示了如何抽取通用组件。

@layer components {
    .btn-primary {
        @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
    }
}

TailwindCSS的扩展是分层的。代码中,@layer components表示我们操作components这一层,我们在其中添加了一个自定义组件CSS类btn-primary。而btn-primary的定义并不是具体的CSS代码,而是使用@apply指定设置的一组TailwindCSS原子类。

<button class="btn-primary">点我</button>

在HTML代码中,我们直接使用btn-primary这个CSS类即可。

不要过度抽象

在实际开发中,TailwindCSS一个最佳实践是不要过度抽象。虽然将原子类封装成组件能让代码看起来更“干净”,但这却与TailwindCSS的设计思路背道而驰。过度的封装会给你的同事造成更大的心智负担,他(她)查看代码时不得不在多个文件中跳转,修改一个通用样式的风险也变得不可控。总而言之,封装要适度,不要过度抽象。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap