让你开发更舒适的 Tailwind 技巧 - HelloWorld开发者社区

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验

使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。

IDE 设置

智能提示扩展

让你开发更舒适的 Tailwind 技巧

Tailwind 智能提示是一款适用于 VSCode 和 JetBrains（如 IDEA 和 Webstorm）的扩展。它提供自动补全功能，便于在 HTML 元素上编写类，并可访问 Tailwind 配置。若您忘记了定义的颜色名称，它还能帮助您快速选取。

下载链接如下：

VSCode 版本：https://marketplace.visualstudio.com/items?itemName=bradlc.vs...

IDEA 和 Webstorm 版本：https://plugins.jetbrains.com/plugin/15260-tailwind-intellisense

或者在代码编辑器的扩展市场中搜索即可。

Prettier 插件

在给元素编写许多类名时，有时会变得难以管理，难以区分哪些是自定义的，哪些用于响应式布局，以及哪些样式应该为了更好的理解而分组。比如，在编写一堆样式时，突然想起忘记为 flexbox 设置间隙，需要将其复制并粘贴到代码的不同位置。这种情况对我来说需要过多的思考。

为解决此类问题，Tailwind 团队推出了一个 Prettier 插件来为我们整理代码。使用它，只需运行：

npm i -D prettier prettier-plugin-tailwindcss

让你开发更舒适的 Tailwind 技巧

要使其工作，如果您之前没有使用过 prettier，请安装官方扩展，并配置一些您喜欢的快捷键来格式化文档：

如果你安装了 eslint，可能想将默认格式化程序更改为它。为此，请按 CTRL + Shift + P，选择“使用格式化文档”，然后选择“配置默认格式化程序”，并从列表中选择 prettier。如果您之前使用了一些 eslint 选项，可以在 Prettier 的官方网站上阅读如何将这些规则与 prettier 集成。

这个插件的排序顺序如下：

Tailwind 中未定义的类名，即用户自定义的类名
Tailwind 中的宽度、弹性布局等其他样式，按其重要性排序
媒体查询和悬停效果

配置我们的项目

当刚安装 Tailwind 时，您可能会运行以下命令：

npx tailwindcss init -y

这会生成 Tailwind 配置文件。如果正确探索并填写它，它将非常有用！

逆向媒体查询

在开始任何 Tailwind 项目之前，首先要做的两件最重要的事情是：

使用逆向媒体查询。

制作响应式网站通常有两种基本方法：移动端优先和桌面端优先：

让你开发更舒适的 Tailwind 技巧

第一种方法首先从制作移动视图开始，然后调整至桌面视图，而另一种则恰好相反。

默认情况下，Tailwind 基于第一种方法，这就是为什么它的所有基本媒体查询都是 min-width 类型的，意味着需要在某个断点以下定义样式，然后使用 md 和其他变体类进行更改。

对我来说，这个决定有些麻烦，因为我习惯于从桌面视图开始制作网站。如果你和我一样，有一个小技巧可以使 Tailwind 按我们想要的方式工作，只需将以下内容添加到配置文件的 theme 中：

screens: {
  '2xl': {'max': '1535px'},
  // => @media (max-width: 1535px) { ... }

  'xl': {'max': '1279px'},
  // => @media (max-width: 1279px) { ... }

  'lg': {'max': '1023px'},
  // => @media (max-width: 1023px) { ... }

  'md': {'max': '767px'},
  // => @media (max-width: 767px) { ... }

  'sm': {'max': '639px'},
  // => @media (max-width: 639px) { ... }
}

完成后，所有断点都将从特定宽度开始工作，我们不需要反向思考了！

使用任意 REM 值

你可能已经知道，CSS 中有许多单位用来定义大小，如 pt、px、cm、em、rem 等。对我来说，这些单位中最有价值的是 rem。rem 的默认大小是 16px，即 HTML document的默认大小，这意味着当用户在浏览器中更改缩放比例时，我们的document 也会相应放大。

但你可能会问，当需要将所有 Figma 设计转换为这些值并花费大量时间时，如何使用这些值呢？为此，我们可以在主 CSS 文件中这样定义基本字体大小：

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="/catland" className="rounded-medium bg-orange px-[1rem] py-[1.4rem] text-blue">
    catland 32 apartment 69
  </a>
  <a href="/station" className="rounded-medium bg-orange px-[1rem] py-[1.4rem] text-blue-dark">
    cat’s station in Cat York
  </a>
  <a href="/cafe" className="rounded-medium bg-orange px-[1rem] py-[1.4rem] text-blue-darkest">
    cat cafe at Catfel Tower
  </a>
</nav>

注意我们是如何重复自己的？如果我们以后需要更改这个类怎么办？当然，我们可以利用现代 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="/catland" className="text-blue">
    catland 32 apartment 69
  </a>
  <a href="/station" className="text-blue-dark">
    cat’s station in Cat York
  </a>
  <a href="/cafe" className="text-blue-darkest">
    cat cafe at Catfel Tower
  </a>
</nav>

但这也有重复！如果我们以后需要使用这种结构，或者我们的一些同事根本不知道它，每次都会忘记怎么办？为了解决这个问题，有一个解决方案：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="/catland" className="text-blue">
    catland 32 apartment 69
  </a>
  <a href="/station" className="text-blue-dark">
    cat’s station in Cat York
  </a>
  <a href="/cafe" className="text-blue-darkest">
    cat cafe at Catfel Tower
  </a>
</nav>

使用 React 和 TypeScript 制作动态可复用组件

由于 React 和 TypeScript 的技术组合越来越受欢迎，我们将利用 Tailwind 制作一些酷炫的可复用按钮。

在此过程中，我们还将了解一些非常小的库来帮助我们：

Class-variance-authority 是一个用于制作可复用类的库，特别适合于 Tailwind，因为我们不需要在它之外定义任何东西 —— 一个安全、始终有效的工具！
Tailwind-merge 和 clsx 是两个帮助我们管理我们在 class-variance-authority 定义中定义的类的库。它们的使用完全是可选的，因为它们只在一些罕见的情况下有用。

我们安装这些库，然后开始创建我们的按钮！

npm i tailwind-merge clsx class-variance-authority

首先，我们创建一个名为 Button.tsx 的文件，其中包含一个基本的按钮组件：

export const Button = () => {
  return (
    <button>
    </button>
  );
};

然后，我们用 class-variance-authority 定义我们的类。为此，从库中导入函数，如下所示：

import { cva } from "class-variance-authority";

函数接受两个参数：

适用于我们可复用按钮所有变体的基本类
包括我们定义的变体及其基本回退情况的对象（以防我们忘记定义某些内容）。

示例如下：

export const buttonVariants = cva(
  "text-black transition-all border-[1px] border-solid focus:ring-2 text-small",
  {
    variants: {
      variant: {
        filled: "bg-yellow-600 ring-black border-yellow-600 hover:bg-white",
        outline: "border-yellow-600 ring-black bg-white hover:bg-yellow-600",
      },
      size: {
        small: "px-[1.5rem] py-[1rem] rounded-sm",
        medium: "px-[2rem] py-[1.5rem] rounded-md",
      },
    },
    defaultVariants: {
      variant: "filled",
      size: "small",
    },
  }
);

然后，我们定义默认变体：variant 将是 filled，size 将是 small。

由于我们的组件是可复用的，我们需要以某种方式将这些属性传递给它 —— 我们将通过 props 来做，并使它们类型安全。

首先，我们将声明一个基本接口：

interface IButtonProps {}

然后，我们将从 class-variance-authority 的泛型接口 VariantProps 扩展，可以通过 cva 函数导入它。它接受我们定义的 buttonVariants 的 typeof 并使 props 类型安全，因此我们不会定义我们没有的 big 尺寸：

interface IButtonProps extends VariantProps<typeof buttonVariants> {}

最后，我们还将从 React 的 HTMLAttributes 扩展，它也是泛型并接受 HTML 元素的类型。它将使我们的 props 包括按钮的所有基本 HTML 属性，如 onClick，以及我们类型中定义的 React children：

interface IButtonProps
  extends HTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

完成所有这些后，我们可以这样对组件进行类型化并使用其 props：

export const Button = ({
  variant,
  size,
  className,
  children,
  ...props
}: IButtonProps) => {
  return (
    <button className={buttonVariants({ size, variant })} {...props}>
      {children}
    </button>
  );
};

现在，当我们传递 variant 和 size 时，按钮将改变其视图！看：

export default function App() {
  return (
    <>
      <Button variant="filled">填充按钮</Button>
      <Button variant="outline">轮廓按钮</Button>
    </>
  );
}

但是，当我们需要稍微调整按钮时怎么办？为此，我们有我们的 className 属性，可以用两种不同的方式使用：

我们在现场将其与我们的 buttonVariants 函数合并，使用模板字面量：

<button className={`${buttonVariants({ size, variant })} ${className}`} {...props}>

我们使用之前提到的两个库来确保我们的类没有重复：例如，当我们有 mx-2 和 my-2 时，它将被转换为 m-2。

为此，让我们在其他地方定义一个小函数，如下所示：

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export const clsxm = (...classes: ClassValue[]) => twMerge(clsx(...classes));

这里，它接受任何数量的类并将它们与 tailwind-merge 库中的函数合并。现在，我们可以用该函数而不是模板字面量合并我们的类：

<button
  className={twMerge(buttonVariants({ size, variant }), className)}
  {...props}
>

完成！

需要注意的一点 —— class-variance-authority 方法制作可复用组件的最佳之处在于，我们能够在应用程序的任何其他地方重用我们收到的函数，这就是为什么我们要导出它的原因。在这里，最常见的用途可能是需要为某个 <a> 链接设置样式，可以轻松实现：只需导入函数并定义类即可！

import { buttonVariants } from "./Button/Button";

export default function App() {
  return (
    <>
      <a className={buttonVariants({ size: "medium", variant: "filled" })}>
        中等大小填充链接！
      </a>
    </>
  );
}

最后，如果您一直在跟随我的示例，您可能已经注意到，当我们在 cva 函数内编写类时，Tailwind 智能提示扩展不起作用。这是因为它没有被训练去做这件事 —— 它只在我们编写类名和使用 @apply 样式时触发。为了解决这个问题，我们可以稍微调整 settings.json 文件，添加以下行：

"tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],

让你开发更舒适的 Tailwind 技巧

交流

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

让你开发更舒适的 Tailwind 技巧

IDE 设置

智能提示扩展

Prettier 插件

配置我们的项目

逆向媒体查询

使用任意 REM 值

添加我们自己的插件

使用 React 和 TypeScript 制作动态可复用组件

交流

Andriod第三方源码分析

Android进阶之旅-(Framework源码分析)

热门文章