介绍

Tailwind CSS由于其实用性优先级和易于自定义选项，因此Web开发人员在Web开发人员中获得了巨大的知名度。尽管许多开发人员熟悉尾风的基础知识，但有几种高级技术和技巧可以将您的尾风技能提升到一个新的水平。

在本文中，我们将探讨前五名高级的尾风技巧，这些技巧将帮助您优化工作流程，增强设计并提高开发过程。

复制classNames很好

很多次，您可能遇到了您重复一系列类似的时间ð
的情况

 <ul>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Home
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        About
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Contact
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Signin
      </li>
 </ul>

您可能会很想创建一个单独的组件，以供<li>应用样式。我认为，仅为应用样式创建一个单独的组件可能是不需要的。取而代之的是，您可以利用文本编辑器的功能，例如多核编辑。另外，您可以先设计单个<li>，应用所需的设计，然后简单地复制该<li>的类名称即可在其他地方重复使用它们。这种方法可以节省时间并简化开发过程

黑暗模式

如果您使用class策略实现了暗模式，则可能注意到侧边栏的颜色为白色，看起来不太正确。要解决此问题，您可以通过将html元素的color-scheme属性设置为light dark进行纠正。

html.dark{
    color-scheme: dark light;
}

如果您不确定在React+Tailwind项目中实现暗模式，我已经写了一篇详细的文章来解释该过程。看看如何有效地将黑暗模式纳入您的项目。

View artcle

使用ring实用程序创建阴影

tailwind为盒子阴影提供了预定义的类，但它们都没有在所有四个方向上创建均匀分布的阴影。但是，您可以通过使用ring实用程序来实现这一目标。

className = "ring-1 ring-black/10"

用插件优化工作流程

Tailwind提供了庞大的插件生态系统，可扩展其功能并简化您的工作流程。插件可以添加新组件，实用程序，甚至可以与其他库集成。熟悉流行的插件，例如排版，形式，长宽比或过渡公用事业，以提高生产力。

通过利用插件，您可以增强设计并减少编写自定义CSS的需求。

如果您要构建PWA，则绝对应该检查我制作的this插件。它可以帮助您增加PWA的UX。

使用tailwind-merge代替常规classname conducter

将Tailwind CSS纳入JavaScript框架时，您可能已经使用classnames或clsx等软件包来动态生成基于自定义逻辑的元素的类名称。这些软件包简化有条件添加类名的任务，使过程变得更加简单，更有效。

但是，如果您要构建自己的设计系统，并且要求组件/元素接受可以修改组件的特定样式的类名称，我建议使用tailwind-merge而不是clsx或classnames。

想象这是您如何计算组件的className

type Props = ComponentProps<"a">;
const Test = ({ className, ...rest }: Props) => {
  return (
    <a
      {...rest}
      className={clsx(
        "classes required to satisfy your design system",
        className
      )}
    >
      Test
    </a>
  );
};

为了争论，让我们假设这是className

 className={clsx("text-blue-600 text-4xl font-bold", className)}

您希望将文本颜色更改为Fuchsia-600，您可以轻松地将text-fuchsia-600作为className将其传递，并且它将无缝运行。但是，如果您试图通过通过text-black将文本颜色更改为黑色，则它将不会带来所需的效果。

这是由于尾风的性质，应用实用程序类别，每个类都具有相同的特异性。结果，当多个类修改同一元素属性时，出现后来的类优先。这种行为与标准CSS原则一致。

让我们看一下在两种情况下计算的classNames

// when text-fuchsia-600 is passed className = "text-blue-600 text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-blue-600 text-4xl font-bold text-black"

现在，我们将把tailwind-merge交换为CLSX或ClassNames，让我们再次查看计算的类。

// when text-fuchsia-600 is passed className = "text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-4xl font-bold text-black"

如果您注意到敏锐的tailwind-merge刚刚删除了矛盾的类别ðä。

对tailwind-merge可以实现的目标感到惊讶？立即开始通过NPM下载

npm i tailwind-merge

如果您想了解有关tailwind-merge的更多信息，请观看Simonwiss在YouTube上的此教程

结论

Tailwind CSS是一个强大的公用事业领先框架，它提供了许多高级技术来增强您的Web开发工作流程。在本文中，我们探索了五个宝贵的技巧，将您的尾风技能提升到一个新的水平。

我鼓励您在网络开发项目中尝试这些高级的尾风技巧。

我很想听听您的经历和反馈。请随时在下面的评论部分分享您的想法和见解。您的反馈很有价值，可以帮助进一步完善这些技术并为尾风CSS社区做出贡献。

如果您喜欢阅读这篇文章并想保持联系，请确保查看我的Linktree。

快乐黑客