2020-03-10

392 字 2 分钟阅读

如何在 Gulp 打包的项目中使用 Tailwind CSS ?

Franco
@franco

在《什么是 Tailwind CSS ?》中，我们介绍了 Tailwind CSS 这种新兴的 CSS 框架。Tailwind CSS 凭借其灵活的使用方式极大地提高了前端页面的开发效率，赢得了前端工程师们的青睐。在本篇中，我们一起看一下如何使用预编译的 Tailwind CSS 库，以及如何在使用 gulp 打包的项目中引入 Tailwind CSS 。

使用预编译包

使用预编译包，即我们直接在前端页面中引入官方已经编译好的 Tailwind CSS 的发行版。比如使用如下的方式在页面 head 中引入 Tailwind CSS 框架，然后我们就可以在页面中直接使用 Tailwind CSS 框架的大部分功能了。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

但是官方也提到了这种使用方式的诸多弊端：

无法自定义 Tailwind 使用的默认主题
无法使用像 @apply 、 @variants 等任何指令（ directives ）
无法启用默认被关闭的一些变体（ Variants ），如 group-focus
无法安装第三方插件
无法裁掉项目中未被使用到的样式内容（这样会导致引入的包体积很大，对页面加载速度产生影响）

基于上述这些原因，官方不推荐在生产环境中这样使用 Tailwind CSS 。这种方式仅适用于一些演示项目。

与 Gulp 一起使用

Gulp 是一种常用的前端编译打包工具包。我们来看一下在使用 Gulp 打包的项目中如何引入 Tailwind CSS 。

创建项目

首先我们来创建一个 npm 项目 gulp-demo：

mkdir gulp-demo
cd gulp-demo
npm init -y

安装依赖

官方推荐使用 PostCSS 来作为 CSS 预处理器。下面我们安装包括 Tailwind CSS 、 PostCSS 、 autoprefixer 、 Gulp 等用到的包。

npm install -D tailwindcss@latest autoprefixer@latest postcss@latest gulp gulp-postcss gulp-rename

配置 PostCSS

我们在项目根目录下添加 PostCSS 的配置文件 postcss.config.js 。其中主要引入了 tailwindcss 和 autoprefixer 两个插件。如果想要了解更多使用 PostCSS 来预处理 Tailwind CSS 的相关内容，可以看这里。

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

配置 Tailwind CSS

接下来，我们使用 npx tailwindcss init 来添加 Tailwind CSS 的配置文件 tailwind.config.js 。该命令生成的配置文件会自动包含基本的框架内容。配置中通过 purge 属性指定：在编译时，根据满足 ./*.html 通配符的 HTML 文件中使用过的 Tailwind CSS 指令来生成最终的样式文件，未使用过的内容将不会包含在最终的样式文件中。

// tailwind.config.js
module.exports = {
    purge: ['./*.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

然后我们在项目根目录下分别创建 css 和 public 目录，并在 css 目录下创建文件样式 styles.css，添加下列内容。该样式文件主要是引入了 Tailwind CSS 框架下的一系列内置库包括 base 、 components 、 utilities 。 Tailwind 框架将会在编译时根据你的实际配置来生成相应的样式来替换到这些内容。

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

配置 Gulp

接下来我们来配置 Gulp ，我们在根目录下创建 gulpfile.js 并添加下列内容。根据配置，在通过 Gulp 编译打包时，Gulp 会使用 PostCSS 插件来编译 Tailwind CSS 库，生成最终的样式文件并保存在根目录下的 public 下。

// gulpfile.js
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');

function processTailwind() {
    return (
        gulp
            .src('./css/styles.css')
            .pipe(postcss())
            .pipe(
                rename(function (p) {
                    p.dirname = './public/';
                })
            )
            .pipe(gulp.dest('.'))
    );
}
gulp.task('default', processTailwind);

配置 NPM

下面我们在根目录下的 package.json 文件中添加编译脚本 build ，内容如下。设置环境变量 NODE_ENV='production' 后，在执行编译时 Tailwind 将会自动清除库中未使用的样式。

{
    "name": "gulp-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "export NODE_ENV='production'&&gulp",
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "devDependencies": {
        "autoprefixer": "^10.2.4",
        "gulp": "^4.0.2",
        "gulp-postcss": "^9.0.0",
        "gulp-rename": "^2.0.0",
        "live-server": "^1.2.1",
        "postcss": "^8.2.6",
        "tailwindcss": "^2.0.3"
    }
}

开发代码

我们在根目录下创建 index.html 文件，并添加下列内容。后面我们会配置 Gulp 的编译流程，编译后会生成样式文件 styles.css 并保存在前面创建的 public 目录下。我们在 index.html 中引入了这个样式文件，并添加了一个标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/public/styles.css">
</head>
<body>
    <h1 class="text-4xl font-bold text-center text-blue-500">Hello world, Tailwind by gulp-postcss!</h1>
</body>
</html>

编译及预览效果

到这里，我们终于完成了使用前的一系列设置及开发工作。执行 npm run build 命令后，我们将发现 public 目录下将会生成 styles.css 文件。这个文件就是 Tailwind CSS 框架根据我们在 index.html 文件中实际使用情况而生成的样式文件，其中不包含未使用的内容。为了演示效果，我们还需要再安装一个库 live-server ，该库可以为我们启动一个临时的服务器，让我们可以浏览指定目录的 HTML 文件。

npm install -D live-server
npx live-server ./

执行上述命令后，根据提示访问 http://127.0.0.1:8080 ，既可以看到效果。

在下篇内容中，我们将介绍如何在使用 Webpack 打包的项目中引入 Tailwind CSS 。

原创 Tailwind CSS 前端