解决 Gatsby 项目中使用 TailwindCSS 出现未解析类的问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 TailwindCSS

TailwindCSS 是一个实用、低级别的 CSS 框架，它专注于为 Web 应用程序的界面提供了大量可复用的样式类。与其他框架不同，TailwindCSS 不包括任何预先设计的组件，而是专注于提供设计系统中常见的样式类，例如颜色、字体大小、行高等。这意味着你可以灵活地组合这些类来创建完全自定义的设计，而无需使用繁琐的 CSS。

Gatsby 项目中使用 TailwindCSS

Gatsby 是一个用于构建高性能、可靠和安全的现代 Web 应用程序的框架。而 TailwindCSS 则是一种非常流行的 CSS 库，许多开发者都选择将其用于 Gatsby 项目。

然而，一些开发者在使用 TailwindCSS 进行样式编写时，可能会遇到未解析类的问题。这是因为默认情况下，TailwindCSS 仅包括一组 CSS 样式，而不包括以类作为选择器的 CSS 规则。因此，当在项目中使用未定义的 TailwindCSS 类时，浏览器不会知道该如何呈现这些样式，导致产生了未解析类的问题。

解决方案

有两种方法可以解决这个问题：手动定义未生成的规则或使用插件来自动完成此过程。

手动定义规则

手动定义规则比较繁琐，但是它可以让你完全掌控项目的外观。这个过程需要在 tailwind.config.js 文件中的 variants 属性中添加一个新的 extend 类型。该类将包含一个对象数组，其中每个对象都是样式的名称和属性。下面是一个例子：

module.exports = {
  variants: {
    extend: {
      padding: ['hover'],
      backgroundColor: ['active'],
    },
  },
};

在这个例子中，我们扩展了 padding 和 backgroundColor 的 CSS 属性，并为每个属性添加了一个新的类变体：

hover:padding
active:backgroundColor

现在在代码中使用这些新的类，就可以成功解决未解析类的问题。

使用插件

手动定义规则的方法虽然灵活，但却比较繁琐。因此，我们可以使用 gatsby-plugin-postcss 插件来自动完成此过程。这个插件可以自动构建 TailwindCSS 类的 CSS 规则，从而可以轻松地使用未定义的 TailwindCSS 类。

首先，在 Gatsby 项目中安装 gatsby-plugin-postcss。然后，需要在 gatsby-config.js 文件中添加以下插件配置：

-- -------------------- ---- -------
-------------- - -
  -------- -
    -
      -------- ------------------------
      -------- -
        --------------- -------------------------
      --
    --
  --
--

现在，你可以在项目中安全地使用任何未定义的 TailwindCSS 类！

结论

TailwindCSS 是一个实用、低级别的 CSS 框架，它专注于为 Web 应用程序的界面提供了大量可复用的样式类。在 Gatsby 项目中使用 TailwindCSS 可以轻松地创建美观且易于维护的 UI。

当出现未解析类的问题时，你可以手动定义规则来解决问题。但是，如果你不想手动定义规则，可以考虑使用 gatsby-plugin-postcss 插件自动完成此过程。这个插件可以自动构建 TailwindCSS 类的 CSS 规则，从而可以轻松地使用未定义的 TailwindCSS 类。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f6b4c2c5c563ced58b71c3