解决 Tailwind CSS 在 Jekyll 中报错的问题

背景

Jekyll 是一个静态网站生成器，可以方便地将 Markdown 文件转换成 HTML 页面。Tailwind CSS 是一个功能强大的 CSS 框架，可以快速地构建出各种样式。

在使用 Jekyll 和 Tailwind CSS 进行开发时，有时候会出现一些报错，导致无法正常预览或构建网站。本文将会介绍一些常见的问题以及解决方案。

问题与解决方案

问题一：Jekyll 报错：Liquid Exception: undefined method `gsub' for nil:NilClass

这个报错的原因是 Jekyll 无法处理 Tailwind CSS 中的特定语法。例如：

<div class="p-{{ breakpoint }}-10"></div>

这里的 {{ breakpoint }} 是一个变量，表示屏幕断点。但是 Jekyll 无法理解这个语法，导致报错。

要解决这个问题，可以使用 Liquid 的 assign 语法，

{% assign breakpoint = 'md' %}
<div class="p-{{ breakpoint }}-10"></div>

这样就可以正常显示了。

问题二：Jekyll 报错：invalid argument: --css styles.css

这个报错的原因是 Jekyll 无法处理 Tailwind CSS 中的所有样式。具体来说，当使用类似 @layer 或 @variants 的语法时，Jekyll 会报错。

要解决这个问题，可以使用 PostCSS 来处理 Tailwind CSS。步骤如下。

Step 1. 安装 PostCSS 以及 Tailwind CSS。

npm install postcss tailwindcss

Step 2. 在项目根目录下创建文件 postcss.config.js，并配置如下：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

这里的 autoprefixer 是一个 PostCSS 插件，用于自动添加 CSS 前缀。

Step 3. 在 CSS 文件中引入 Tailwind CSS，并使用 tailwind 命令生成 CSS 文件。

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

npx tailwindcss-cli@latest build styles.css -o main.css

Step 4. 在 Jekyll 的配置文件 _config.yml 中，指定 CSS 文件路径。

assets:
  css:
    - main.css

这样就可以正常显示了。如果需要在开发时实时刷新，请使用 browser-sync 等工具。

总结

本文介绍了 Tailwind CSS 在 Jekyll 中出现报错的两个常见问题以及解决方案。通过这些方法，可以更加高效地使用 Tailwind CSS 进行前端开发。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653711887d4982a6ebf659ea