江苏龙网

  1. 主页 > 生活百科 > >

让你开发更舒适的 Tailwind 技巧( 二 )

Tailwind


html {font-size: 62.5%}从基本的 16 像素出发，62.5% 实际上是 10px 。有了它，我们可以简单地将所有像素值除以 10，所以 100 变成 10，123 变成 12.3，0.523 变成 0.0523 —— 您需将小数点向左移动一位 —— 很简单！
那么，这与我们的 Tailwind 之旅有何关系呢？你可能已经注意到，将预定义的 Figma 项目转换为即时网站非常痛苦 ， 因为尽管基本的 Tailwind 类非常周到 ， 几乎适合所有设计 ， 但找到每一个类都需要一些时间和思考 。例如 ， 我们在 Figma 设计中有一个 20px 的大小 —— 我们可以去 Tailwind 文档中找到相应的类，或者我们可以直接写：
class="px-[2rem]"将值锁定在方括号中意味着我们可以在其中编写任何基本的 CSS，例如我们自己的值而不是预定义的值 。没有其他！无需再搜索或四舍五入！
这是否会使您的包大小增加，因为定义任何任意值时 Tailwind 会创建一个附加类？不会，因为 Tailwind 是可摇树的 —— 这意味着所有基本类都从您的包中删除了，如果您没有使用它们 —— 对您来说更好！
那么可重用性如何呢？我们可以在配置中以与此处相同的方式定义自己的样式，或者使用 Tailwind 的基本样式，并且确实应该这样做！我建议将任意值的使用限制在间隙、特定宽度和高度以及任何不可预测且不适合设计系统的其他事物上 。
使用这种方法使 Tailwind 智能提示注释变得过时了吗？实际上并不是，因为可以在 settings.json 中这样调整扩展的基本字体大?。?
"tailwindCSS.rootFontSize": 10,添加我们自己的插件有时，Tailwind 存在一个问题：它允许我们使用基本的 CSS 构造，比如将某些样式应用于元素的所有子元素 ， 但要使其工作 ， 我们需要重写每个带有该构造的样式，这种方法完全违背了 DRY（不重复自己）原则 。
为了更清楚地说明，我们来看一个基本的例子：

让你开发更舒适的 Tailwind 技巧

文章插图
假设我们需要制作这样一个组件：
<nav className="flex flex-col gap-[1rem] text-center text-medium font-bold underline "><a href=https://www.isolves.com/it/cxkf/yy/CSS2/2023-11-28/"/catland" className="rounded-medium bg-orange px-[1rem] py-[1.4rem] text-blue">catland 32 apartment 69cat’s station in Cat Yorkcat cafe at Catfel Tower注意我们是如何重复自己的？如果我们以后需要更改这个类怎么办？当然，我们可以利用现代 IDE 的多重选择功能，但对我来说那太麻烦了 。
.class > * {@Apply bg-orange rounded-medium px-[1rem] py-[1.4rem]}将会把这个样式应用到所有子元素上，而不需要重复 。因此我们在 Tailwind 类中用 Arbitrary value 用法实现它：
<nav className="flex flex-col gap-[1rem] text-center text-medium font-bold underline[&>*]:rounded-medium [&>*]:bg-orange [&>*]:px-[1rem] [&>*]:py-[1.4rem]"><a href=https://www.isolves.com/it/cxkf/yy/CSS2/2023-11-28/"/catland" className="text-blue">catland 32 apartment 69cat’s station in Cat Yorkcat cafe at Catfel Tower但这也有重复！如果我们以后需要使用这种结构，或者我们的一些同事根本不知道它 ， 每次都会忘记怎么办？为了解决这个问题，有一个解决方案：Tailwind 插件 。
在 Tailwind 配置中，我们可以定义我们自己的自定义属性，以后可以在基本函数中重用，如下所示：
export default {content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],theme: {},plugins: [function ({ addVariant }) {addVariant("child", "& > *");},],};这里，我们说现在我们的代码将有一个名为 ‘child’ 的变体类，它将采用之前在 Arbitrary value 括号中定义的功能 。
现在我们可以这样写：
<nav className="text-medium child:rounded-medium child:bg-orange child:px-[1rem] child:py-[1.4rem] flex flex-col gap-[1rem] text-center font-bold underline "><a href=https://www.isolves.com/it/cxkf/yy/CSS2/2023-11-28/"/catland" className="text-blue">catland 32 apartment 69cat’s station in Cat York


推荐阅读


上一篇：2024年模拟和机器人趋势

下一篇：深入Rust的模式匹配与枚举类型