使用 Sprinkles 构建您自己的类型安全版本的 Tailwind CSS

张世民跟随创客、开发人员、函数式语言和怪诞字体的粉丝。

# 使用 Sprinkles 构建您自己的类型安全版本的 Tailwind CSS

## 

2022 年 7 月 15 日 6 分钟阅读 

我是 CSS 库vanilla-extract的忠实粉丝；在我看来，它是自 Tailwind CSS 以来最令人兴奋的 CSS 工具。如果您是vanilla-extract的新手，它是由 Mark Dalgleish 创建的 CSS-in-JS 库，可让您利用 TypeScript 的强大功能来编写 CSS。

我对 vanilla-extract 的杀手级功能Sprinkles API感到特别兴奋。Sprinkles 允许您根据首要原则创建完全定制的设计系统。您可以使用 Sprinkles 创建自己的原子、实用程序优先的 CSS 框架，而不是使用现成的库，例如Tailwind 和 Tachyon。

在本教程中，我们将设置一个新的 Next.js 应用程序并使用 vanilla-extract 的 Sprinkles API 创建一个自定义的、实用程序优先的 CSS 框架，称为 Sprinkles Tailwind。然后，我们将使用我们的新框架在 Tailwind CSS 主页上重新创建产品卡片演示。在此过程中，我们将看到 vanilla-extract 和 Sprinkles 如何处理伪类、响应式设计和暗模式主题。

- 为什么要使用洒水器？
- Next.js 和 vanilla-extract 入门
- 使用 Sprinkles 创建设计系统
- 将我们的 Sprinkles 库与 Tailwind CSS 进行比较
- 实施主题和响应式设计
- 添加深色主题

那么，当我们可以简单地使用 Tailwind 时，我们为什么要开发我们自己的基于 Sprinkles、实用程序优先的 CSS 库，它已经是一个如此流行的工具？三个原因：类型安全、自定义和本地范围。

首先，使用 Sprinkles，您可以获得与使用任何其他 Typescript 变量相同的类型提示和编译时验证，不再需要文档验证和类名拼写错误。

其次，Tailwind 既固执己见，也有一点学习曲线，尤其是在您不使用 Tailwind 预设语法的情况下。使用 Sprinkles，您正在编写 CSS 而不是 Tailwind 的速记类名。由于 Sprinkles 不以任何内置值开头，因此您可以按照自己喜欢的方式创建 CSS 框架。

最后，还有局部范围。vanilla-extract 在底层使用 CSS 模块的好处之一是，您的所有实用程序类现在默认情况下都是组件范围的。这意味着您可以轻松地将多个设计系统整合到单个应用程序中，而不必担心样式冲突。

## Next.js 和 vanilla-extract 入门

让我们首先创建一个新的 Next 应用程序并安装 vanilla-extract。您可以在此处的 GitHub 存储库中查看此演示项目的完整源代码。

首先创建一个新的 TypeScript 版本的 Next，如下所示：

------

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

------

```typescript
npx create-next-app@latest --typescript 洒-tailwind
```

运行yarn dev以确保我们的安装按预期工作后，我们将安装 vanilla-extract 和 Sprinkles：

```shell
纱线添加 @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/next-plugin @vanilla-extract/sprinkles
```

接下来，通过更新以下内容，在我们的 webpack 构建过程中包含 vanilla-extract/next-plugin next.config.js：

```js
常量 {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
常量 nextConfig = {
  reactStrictMode：真，
};

module.exports = withVanillaExtract(nextConfig);
```

最后，因为我们希望我们的新 Sprinkles 类型被 TypeScript 编译器和我们的 IDE 的 TypeScript 服务器拾取，我们将添加*.css.ts到我们的项目中tsconfig.json：

```json
{
    ...
    "include": ["next-env.d.ts", "**/*.ts", "**/*.css.ts", "**/*.tsx"],
    ...
}
```

## 使用 Sprinkles 创建设计系统

Tailwind CSS 的主要卖点之一是