2020-05-10

436 字 3 分钟阅读

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

Franco
@franco

在上一篇中，我们介绍了如何在使用 Gulp 打包的项目中引入 Tailwind CSS ，以及在何种场景下使用预编译的 Tailwind CSS 库。在本篇中，我们来一起看一下如何在使用 Webpack 打包的项目中引入 Tailwind CSS 。

Webpack 可以说是前端领域里最流行的打包工具，它可以通过各种模块和插件来帮我们完成前端开发中的日常工作。在 Webpack 打包的项目中使用 Tailwind CSS 并不会为我们引入很多额外的工作。下面我们来详细地介绍这种使用组合，与上一篇的介绍流程基本一致。

创建项目

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

mkdir webpack-demo
cd webpack-demo
npm init -y

安装依赖

官方推荐使用 PostCSS 来作为 CSS 预处理器。下面我们安装包括 Tailwind CSS 、 autoprefixer 、 webpack 以及 style-loader 、 css-loader 、 postcss-loader 、 copy-webpack-plugin 、 clean-webpack-plugin 、等 webpack 加载器及插件。style-loader 、 css-loader 、 postcss-loader 用于处理 Tailwind CSS 并生成相应的样式，copy-webpack-plugin 、 clean-webpack-plugin 则用于用于在编译打包时复制及清理文件。

npm install -D webpack webpack-cli tailwindcss style-loader css-loader postcss-loader copy-webpack-plugin clean-webpack-plugin

配置 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: ['src/*.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

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

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

我们在 src 目录下创建 app.js 文件，并添加 import './styles.css'; ，这会将样式文件中引入的 Tailwind CSS 内容加入到 js 编译处理流程中。

配置 Webpack

接下来我们来配置 Webpack ，我们在根目录下创建 webpack.config.js 并添加下列内容。根据配置，在通过 Webpack 编译打包时，Webpack 会使用前面提到的 style-loader 、 css-loader 、postcss-loader 加载器来编译引入的 Tailwind CSS 库，生成包含最终样式信息的 js 文件并保存在根目录下的 public 下。

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'src/app.js'),
    output: {
        path: path.resolve(__dirname, 'public/'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader',
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['public'],
        }),
        new copyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/index.html'),
                    to: path.resolve(__dirname, 'public/'),
                },
            ],
        }),
    ],
};

配置 NPM

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

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build:prod": "export NODE_ENV=production && webpack"
    },
    "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"
    }
}

开发代码

我们在 src 目录下创建 index.html 文件，并添加下列内容。后面我们会配置 Webpack 的编译打包流程，编译后会生成 main.js 文件并保存在前面创建的 public 目录下，样式信息也会被包含在新生成的 main.js 文件中。可以看到，我们在 index.html 中引入了这个 js 文件，并添加了一个标签。

<!DOCTYPE html>
<html>
<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>
</head>
<body>
    <h1 class="text-4xl font-bold text-center text-blue-500">Hello world, Tailwind by webpack-postcss!</h1>
    <!-- reference our main.js file webpack built -->
    <script src="main.js"></script>
</body>
</html>

编译及预览效果

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

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

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

原创 Tailwind CSS 前端