TailwindCSS Signals 超级强化你的 UI

Nic_
1,499 阅读5分钟
alt text

前言

大家好，我是Nic_，今天给大家分享 Tailwind CSS 的最新功能 Signals ，进一步增强了 Tailwind CSS 的能力。本文将介绍如何设置和使用 Tailwind Signals 来超级强化你的 UI。

广告：GPT 4.0 Plus会员共享

先看效果

alt text

什么是 Tailwind Signals？

Tailwind Signals 是 Tailwind CSS 的一个插件，通过利用样式查询（style queries）来动态应用样式。与传统的 CSS 类选择器相比，它提供了一种更直接的方式来管理和应用样式，使得基于祖先状态的样式应用更加简洁和高效。

Tailwind Signals 机制的好处

  1. 响应式状态管理：通过使用样式查询（即容器查询），可以动态地启用自定义状态，这些状态可以被其后代元素直接使用。

  2. 简化状态设置和使用：与现有的 group 变体/实用工具类似，Signals 提供了根据祖先元素状态来设置样式的方法。不同的是，Signals 的状态可以被明确地触发，使得状态的设置和使用都可以通过一个简单的变体来完成，而无需链式调用。

  3. 提升开发体验：减少了开发过程中组合多个变体的复杂度，提供了更简洁直观的 API，从而简化了开发流程。

  4. 适用于复杂状态管理：对于需要管理复杂的父元素或祖先元素状态的情况，特别是超越简单的 peer-X 或 group-X 的情况，使用 Signals 是一个更简便的选择。

使用 TailwindCSS Signals

安装tailwindcss-signals插件后在tailwind.config.js中引入

npm install -D tailwindcss-signals

module.exports = {
  plugins: [
    require('tailwindcss-signals'),
  ]
}

示例及代码

示例一 ：点击checkbox or hover box

alt text

代码：

<Cards class="w-[400px]">
  <template #title> 示例一：点击checkbox or hover box </template>

  <template #content>
    <div>
      <input type="checkbox"
        class="peer h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 mb-2" />
      <div class="peer-checked:signal hover:signal w-32 m-auto">
        <div class="signal:bg-indigo-600 text-indigo-600 signal:text-white bg-indigo-50 p-2 w-32 rounded mb-2">
          box
        </div>
      </div>
    </div>
  </template>
</Cards>

Tailwind Signals：

  • peer：这个类使得该元素成为后续使用peer-类指定样式的参考点。

  • peer-checked:signal：当复选框被选中时，触发signal状态。

  • hover:signal：当鼠标悬停在相关联的元素上时，也触发signal状态。

  • signal:bg-indigo-600 和 signal:text-white：这些是在signal状态激活时应用的样式，改变背景和文本颜色。

样式效果：

  • 默认状态下，div显示为浅蓝色背景和深蓝色文本。
  • 当复选框被选中或者元素被悬停时，背景变为深蓝色，文本变为白色。

示例二：多个signal

alt text

代码:

<Cards class="w-[400px]">
  <template #title> 示例二：多个signal </template>

  <template #content>
    <input type="checkbox"
      class="peer h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 mb-2" />
    <TButton class="peer/button1 ml-2">Hover 1</TButton>
    <TButton class="peer/button2 ml-2">Hover 2</TButton>
    <div
      class="active:signal/custom peer-checked:signal peer-hover/button1:signal peer-hover/button2:signal mt-4 w-32 m-auto">
      <div
        class="after:content-['_😎😎😎'] signal/custom:bg-indigo-600 signal/custom:text-white signal:bg-indigo-600 signal:text-white signal/custom:after:!content-['_🦄🦄🦄'] signal:after:content-['_😘😘😘'] p-2 rounded mb-2 text-indigo-600 bg-indigo-50 ">
        按住
      </div>
    </div>
  </template>
</Cards>

Tailwind Signals：

  • active:signal/custom：在元素处于激活状态时触发自定义的信号状态。

  • peer-checked:signal：当复选框被选中时触发信号状态。

  • peer-hover/button1:signal 和 peer-hover/button2:signal：当鼠标悬停在这两个按钮上时，触发信号状态。

样式效果：

  • signal/custom:bg-indigo-600 和 signal/custom:text-white：在自定义信号状态下背景变为靛蓝色，文字变为白色。

  • signal:bg-indigo-600 和 signal:text-white：在标准信号状态下应用相同的背景和文字颜色。

  • after:content-['_😎😎😎']、signal:after:content-['_😘😘😘'] 和 signal/custom:after:!content-['_🦄🦄🦄']：使用伪元素 after 来在不同信号状态下显示不同的内容。

示例三：No JavaScript

alt text

代码:

<Cards class="w-[400px]">
  <template #title> 示例三：No JavaScript </template>

  <template #content>
    <label for="email" class="block text-sm font-medium leading-6 text-gray-900 text-left">Email</label>
    <div class="mt-2">
      <input type="email" name="email" id="email"
        class="peer block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        placeholder="you@example.com" />
      <div class="peer-invalid:block hidden mt-2">
        <div class="rounded-md bg-red-50 p-4">
          <p class="text-sm font-medium text-red-700">邮箱格式错误</p>
        </div>
      </div>
    </div>
  </template>
</Cards>

Tailwind Signals：

  • peer：标记这个输入字段，使得与它关联的其他元素可以基于它的状态改变样式。

  • peer-invalid:block hidden：当输入字段的内容无效时（如邮箱格式不正确），显示内部的div元素。

样式效果：

  • 当邮箱格式错误时，展示一个红色背景的提示框，内有文字说明错误。

注意事项

  • 避免循环依赖问题：如果你设置的 signal 是基于某个后代元素的状态触发，而这个后代元素的状态又依赖于这个 signal，你可能会遇到循环依赖的问题。

  • 选择合适的伪类变体：在某些情况下，比如你想检查是否有任何后代元素获得焦点，你可能不需要使用:has()，可以选择更简单的伪类变体。例如：

    • 使用 focus-within:signal 代替 has-[:focus]:signal
    • 使用 valid:signal 代替 has-[:valid]:signal（对于表单，可以检查所有表单内容是否有效）

  • 权衡声明式和简单性：虽然使用:has()可以让代码更具声明性，但在某些场景下，直接使用上述更简单的伪类变体可能会更方便和易于理解。

兼容性

浏览器支持有限：对于需要在多个浏览器上兼容的项目，由于样式查询的当前支持状态，可能会面临一些限制。Safari 和 Firefox 正在逐步实现支持，但要达到广泛的可用性可能还需要一些时间。