如何将 Tailwind CSS 与 Jekyll 结合使用？

Question

我正在尝试使用 Tailwind CSS 使我当前的 Jekyll 网站具有响应能力。我关注了这篇文章：https://medium.com/on-web-development/use-jekyll-and-tailwind-css-354ea2320e92

当我将以下代码添加到我的

main.css

文件中时

---
---
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

我收到以下错误：

{ expectedcss(css-lcurlyexpected)

我是一个完整的开始，不知道如何解决这个问题。

我尝试简单地删除开头的破折号，但似乎 Jekyll 需要将主 css 文件作为 YAML 前面的内容。

Answer 1

由于您没有使用 SASS，因此可能不需要顶部两行破折号。这些是 Jekyll 处理文件的。由于您使用 Tailwind 来处理它，因此您不需要这些。

我刚刚启动了一个新的 Jekyll 网站，我的 main.css 如下所示：

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-100;
}

另外，那篇文章展示了可能是一种较旧的设置顺风的方法。尝试https://www.syntaxjournal.com/how-to-add-tailwindcss-jekyll/我刚刚成功使用了它。

我还可以通过同一个命令运行 Jekyll 和 Tailwind：

  "scripts": {
    "jekyll": "bundle exec jekyll serve",
    "tailwind": "tailwindcss -i ./assets/main.css -o ./assets/styles.css --watch",
    "start": "TAILWIND_MODE=watch NODE_ENV=development npm-run-all --parallel jekyll tailwind"
  },

希望这有帮助。