likes
comments
collection
share

几个你可能不知道的 tailwindcss 实用小技巧

作者站长头像
站长
· 阅读数 55

tailwindcss 是这两年最火热的 css 技术。 Utility Classes 是 tailwindcss 的灵魂，我不到 tailwindcss 到底有多少个类名，也许几百个？

应该没有人会去把 tailwindcss 的文档读完才开始写吧。至少我的体验是：

  • 我想写一个红色的文字颜色的样式，让我猜猜它可能是什么类名？可能是 color-black?
  • Tailwind CSS IntelliSense 插件告诉我不对...
  • 翻阅文档，原来是 text-black，记下来！

如果和我一样通过这样来学习 tailwindcss，你可能也错过了一些实用但不太容易想到的 utility class 以及一些小 tips。一起来看看吧。

container

如果你用过 bootstrap，bootstrap 中有一个 .container 类用于创建一个固定宽度的中心对齐的容器。Bootstrap 的 .container 类会根据屏幕尺寸的不同，提供不同的最大宽度。例如，在大屏幕上，.container 的最大宽度可能是 1140px，而在小屏幕上，最大宽度可能是 100%。

在 tailwindcss 中有一个类似的类，不同的是 tailwindcss 的 container 更存粹，他没有居中功能，仅用于将元素宽度固定到当前断点。如下图：

几个你可能不知道的 tailwindcss 实用小技巧 一个常用的场景是配合 mx-auto 来实现居中，在配置文件中，你也可以将它默认设置为居中：

/** @type {import('tailwindcss').Config} */
module.exports ={
  theme: {
    container: {
      center: true,
    }
  }
}

更多配置可见文档：tailwindcss.com/docs/contai…

size

同时设置元素宽度和高度的实用程序，很简单但是很好用！

几个你可能不知道的 tailwindcss 实用小技巧

使用 data- 前缀动态切换样式

根据不同状态来切换样式很常见，比如如下代码：

<button
  className={isError ? 'bg-red-500': 'bg-gray-500'}
>
  message
</button>

如果类名逻辑比较复杂，您能会需要用到类似于 clsx 这样的类，可以试试下面这种技巧：

<button
  data-error={isError}
  className="data-[error]:bg-red-500 bg-gray-500"
>
  message
</button>

使用 data- 前缀来动态切换样式，就像 hover: 一样容易😎

divide 和 space 和 gap

在 tailwindcss 中，divide 和 space 和 gap 都是用来控制元素间距的工具类，但它们的使用场景和效果是不同的。

  • space 类用于在子元素之间添加间距。例如，space-x-4 会在水平方向上的子元素之间添加间距，而 space-y-4 会在垂直方向上的子元素之间添加间距
  • divide 类用于在子元素之间添加边框。例如，divide-x-2 会在水平方向上的子元素之间添加边框，而 divide-y-2 会在垂直方向上的子元素之间添加边框。
  • gap 类用于在网格布局的网格项之间添加间距。例如，gap-4 会在网格项之间添加相同的间距。

不同的工具类可能在不同使用场景有不一样的效果，比如 divide 可以实现这种 button group 的边界效果：

几个你可能不知道的 tailwindcss 实用小技巧

line-clamp

例如，如果你想要限制一个段落的文本行数为 3 行，你可以使用 line-clamp-3 类：

<p class="line-clamp-3"> 这是一段非常长的文本，它可能会占据很多行。但是，当我们使用 line-clamp-3 类时，这段文本的行数将被限制为 3 行。 </p>

在这个例子中，line-clamp-3 类将限制 

 元素的文本行数为 3 行。如果文本的行数超过 3 行，那么超出的部分将被隐藏，并显示为省略号（...）。

几个你可能不知道的 tailwindcss 实用小技巧

group-hover

在用户悬停在一个卡片上时，改变卡片内部元素的颜色。你可以使用 group-hover 来实现这个效果：

<div class="group">
    <p class="text-gray-500 group-hover:text-blue-500">这是一段文本。</p>
    <p class="text-gray-500 group-hover:text-blue-500">这是另一段文本。</p>
</div>

在这个例子中，当用户悬停在带有 .group 类的元素上时，带有 .group-hover: 类的 

 元素的文本颜色将变为蓝色。

这种方法可以让你在不使用 JavaScript 的情况下，实现复杂的悬停效果。

snap

假设你有这么一个需求：在用户滚动一个图片列表时，让每个图片都能自动对齐到容器的中心。你的第一反应可能是使用 js 实现。

使用 tailwindcss，只需要使用 snap来实现这个效果!

几个你可能不知道的 tailwindcss 实用小技巧

大致代码如下：

<div class="snap snap-x flex gap-4 overflow-scroll">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
  <img class="snap-center shrink-0" width="200px" height="100px" src="image.jpg">
</div>

实际上，tailwindcss 是使用了 css 属性：scroll-snap-type，看起来兼容下还算不错。

几个你可能不知道的 tailwindcss 实用小技巧

插件

最后补充两个实用的插件：

headwind

tailwindcss 的类名太长啦！读起来太费劲？headwind 是一个 VS Code 插件，它可以自动将你的 Tailwind CSS 类按照一定的顺序进行排序。来试试吧。

tailwind fold

tailwindcss 的类名太长啦！不想看到它？使用 tailwind fold 可以把它折叠起来，来试试吧。

感谢阅读～

转载自:https://juejin.cn/post/7352079441524998155
评论
请登录