如何在 Jekyll 项目中使用 Tailwind CSS ？

前端开发中，CSS 框架是不可或缺的工具。Tailwind CSS 是一个新兴的 CSS 框架，它提供了一种基于原子类的 CSS 系统，可以让你用更少的代码实现更多的效果。在 Jekyll 项目中使用 Tailwind CSS 可以让你更方便地开发和维护网站，本文将详细介绍如何在 Jekyll 项目中使用 Tailwind CSS。

步骤

第一步：安装 Tailwind CSS

在 Jekyll 项目中使用 Tailwind CSS 需要先安装它。可以使用 npm 或者 yarn 安装 Tailwind CSS，这里以 npm 为例。在项目根目录下打开终端，输入以下命令：

npm install tailwindcss

安装完成后，在根目录下会生成 node_modules 目录，里面包含了 Tailwind CSS。

第二步：配置 Tailwind CSS

接下来，需要在项目根目录下新建一个 tailwind.config.js 文件，用来配置 Tailwind CSS。这里我们使用默认配置，只需要在文件中输入以下代码：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

第三步：引入 Tailwind CSS

接下来要做的就是引入 Tailwind CSS，这里我们有两种方式：

方式一：直接在 HTML 中引入（不推荐）

第一种方式是直接在 HTML 中引入 Tailwind CSS，这种方式简单直接，但不利于维护。在项目中新建一个 styles.css 文件，在其中输入以下代码：

@import "../../node_modules/tailwindcss/base.css";
@import "../../node_modules/tailwindcss/components.css";
@import "../../node_modules/tailwindcss/utilities.css";

然后在 HTML 中引入该文件：

<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">

方式二：在 SCSS 中引入

第二种方式是在 SCSS 中引入 Tailwind CSS，这种方式更加灵活，方便调整样式，也更符合前端开发的习惯。在项目中新建一个 styles.scss 文件，在其中输入以下代码：

@import "../../node_modules/tailwindcss/base";
@import "../../node_modules/tailwindcss/components";
@import "../../node_modules/tailwindcss/utilities";

然后在 HTML 中引入该文件：

<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">

第四步：编译 SCSS

最后一步是编译 SCSS，将其转换为 CSS。可以使用 Jekyll 自带的 SASS 编译器，也可以使用其他第三方编译器。这里以 Jekyll 自带的编译器为例，只需要在 _config.yml 文件中配置以下代码：

sass:
  sass_dir: assets/scss
  style: compressed
  sourcemap: true

其中，sass_dir 指定了 SCSS 的目录，style 指定了 CSS 的输出格式，sourcemap 指定了是否生成 sourcemap 文件。配置完成后，在终端中输入以下命令即可编译 SCSS：

bundle exec jekyll serve

示例代码

上述步骤已经介绍得比较详细了，这里给出一个完整的示例代码，供参考。

tailwind.config.js：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

styles.scss：

@import "../../node_modules/tailwindcss/base";
@import "../../node_modules/tailwindcss/components";
@import "../../node_modules/tailwindcss/utilities";

_config.yml：

sass:
  sass_dir: assets/scss
  style: compressed
  sourcemap: true

index.html：

---
layout: default
---

<!-- 内容省略 -->

<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">

总结

使用 Tailwind CSS 可以让前端开发更加高效和方便，但在 Jekyll 项目中使用时需要做一些配置和调整。本文详细介绍了在 Jekyll 项目中使用 Tailwind CSS 的步骤和示例代码，希望能够对你有所帮助。

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