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

# 使用 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 的主要卖点之一是它如何迫使用户在定义明确的设计系统的约束下工作，而不是不一致的一次性值。

Tailwind 还预装了一个默认系统，该系统具有合理的值和合理的快捷方式，可满足常见的布局需求。在我们的项目 Sprinkles Tailwind 中，我们将从Open Props项目中获取调色板、排版和尺寸比例。我们还将为布局添加一些常见的 Tailwind 值。

首先，我们将首先colors.css.ts在目录下创建一个文件./styles并定义我们的颜色值：

```typescript
常量调色板 = {

'灰色-0'：'#f8f9fa'，

'灰色-1'：'#f1f3f5'，
...

'灰色 9': '#212529',

'red-0': '#fff5f5',

... /* 完整调色板请参见 https://github.com/Shimin-Zhang/TailSprinkles/blob/main/styles/colors.css.ts */

};

导出默认调色板；
 

我们将为 , 做同样的事情border.css.ts来size.css.ts建立typography.css.ts我们设计系统的基础。

一旦我们设置了我们的设计系统值，我们将像这样定义我们的 Sprinkles 系统：

```typescript
进口 {
  定义属性，
  创建Sprinkles，
} 来自'@vanilla-extract/sprinkles'；

从'./colors.css'导入调色板；
从'./typography.css'导入{fontFamily，fontWeight，lineHeight，fontSize}；
从'./size.css'导入{大小，空间}；
从'./border.css'导入{borderSize，borderRadius}；

const responsiveProperties = defineProperties({
  特性： {
    显示：['none'，'flex'，'block'，'inline']，
    flexDirection：['行'，'列']，
    证明内容：[
      '拉紧'，
      '弹性开始',
      '中央'，
      '弹性端',
      '空间周围'，
      '空间之间'
    ],
    对齐项目：[
      '拉紧'，
      '弹性开始',
      '中央'，
      '弹性端'
    ],
    paddingTop：空间，
    paddingBottom：空间，
    paddingLeft：空间，
    paddingRight：空格，
...
  },
  速记：{
    填充：[
      '填充顶部',
      '填充底部',
      'paddingLeft',
      'paddingRight'
    ],
    paddingX: ['paddingLeft', 'paddingRight'],
    paddingY: ['paddingTop', 'paddingBottom'],
...
    placeItems: ['justifyContent', 'alignItems']
  }
});

阿里云盘TV电视盒子，所有资源无限速下载，在线播放无限制！常量系统属性 = 定义属性（{
  特性： {
    颜色：调色板，
    背景：调色板，
    字体家族：字体家族，
    字体大小：字体大小，
    ...
  }
});

出口常量洒= createSprinkles（
  响应属性，
  系统属性
);

导出类型 Sprinkles = 参数[0];
 

Sprinkles 的defineProperties功能将我们的设计系统标记转换为一组样式值。然后通过 将这些值组合在一起，createSprinkles以便用户可以以 CSS-in-JS 方式使用它们。

请注意，我们将属性分为两个单独的类别。responsiveProperties是我们稍后将以类似于 Tailwind 的视口前缀的响应方式设置样式，即md:. 系统属性将取决于主题，类似于 Tailwind 的dark:前缀。然后，我们导出生成原子类的 Sprinkles 对象及其类型，这为我们提供了类型安全性。

该shorthands键允许我们定义类似于 CSS 速记和 Tailwindpx-*, p-*类的 CSS 速记值。

接下来，我们将创建一个新页面并导入我们新的类型安全实用程序框架：

```typescript
从“下一个/头”导入头
从'../styles/sprinkles.css'导入{洒}；

导出默认函数颜色（）{
    返回 （
       

## 将我们的 Sprinkles 库与 Tailwind CSS 进行比较

让我们看看 Sprinkles 的类型安全操作。首先，我们将尝试添加一个有效的 CSS 属性 ，backgroundColor它没有在我们的 Sprinkles 应用程序中定义。我们看到它抛出了一个类型错误：

接下来，我们添加color键并看到有效值列表显示为建议：

正如预期的那样，使用不在系统内的颜色值会立即引发类型错误：

这比在文档中查找正确的 Tailwind 类名称、打错字、然后等待浏览器刷新才注意到它要快得多。

设计系统全部设置好后，我们现在可以从 Tailwind 主页中获取产品卡片示例，复制示例 HTML，并将其转换为我们新的 Sprinkles Tailwind 框架：

```html

  顺风洒水

类名 = {
  英石（{
    显示：'弹性'，
    fontFamily: '无衬线',
    宽度：'尺寸内容-3'，
    marginY: '自动尺寸',
    背景：“白色”，
    边界半径：'radius-3'，
    boxShadow：'shadow-2'
  })
}>
      类名 = {
      英石（{
        弹性：'无'，
        宽度：“尺寸-12”，
        高度：'尺寸-13'，
        位置：'相对'，
      })
    }
    >
        加载="懒惰" 类名 = {
      英石（{
        位置：'绝对'，
        宽度：'满'，
        高度：“满”，
        objectFit: '封面',
        插图：'0'
      })}/>