如何使用PurgeCSS和PostCSS设置Tailwind

如何设置工作流程以使用PurgeCSS和简单的PostCSS设置修剪Tailwind CSS(不涉及Webpack)

我最近着手将博客CSS移至尾风

Tailwind是一个有趣的框架,因为它没有提供一组Bootstrap或其他小部件,而是提供了公用事业

我发现它与HTML的使用方式产生了很大的共鸣。

我介绍了我的用法Vue的尾风在上一篇文章中,但是还没有合适的构建工具,可能很难正确设置正确的位置,我决定写这篇博客文章,甚至只是为了让我以后记得

在这篇文章中,我解释了如何将Tailwind与任何一种项目。

安装Tailwind

第一步是使用npm或yarn安装Tailwind:

npm init -y
npm install tailwindcss

创建配置文件

接下来,使用此命令来创建配置文件:

npx tailwind init

这将创建一个tailwind.config.js项目根目录中的文件,添加基本的Tailwind配置。

配置PostCSS

现在您需要调整的CSS配置以确保Tailwind运行。添加:

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

给你postcss.config.js。如果不存在,请创建一个。

为了方便起见,我还添加了autoprefixer,您可能会需要它。用安装npm install autoprefixer

哦,还要确保您安装了PostCSS(npm install -g postcss-cli

创建Tailwind CSS文件

现在,在所需的位置创建一个CSS文件,例如tailwind.css并添加

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

创建构建命令

现在打开你的package.json文件,如果没有,请添加一个脚本部分:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

建立尾风

现在从命令行运行npm run build:css将构建最终的CSS文件。

结果文件在static/dist/tailwind.css(您可以在上面的命令中更改位置)。

更改文件后自动重新生成CSS

每次我更改主题HTML(存储在layouts文件夹),我想重新生成CSS,并触发我设置的清除和缩小。

这该怎么做?

安装watchnpm软件包:

npm install watch

并添加watch脚本给你package.json文件。你已经有build:css从以前开始,我们只添加了一个脚本来监视layouts文件夹并运行build:css每次更改时:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

现在运行npm run watch而且你应该很好走!

修剪文件大小

如果检查,则结果文件很大。即使您在HTML中不使用任何Tailwind类,默认情况下也会包含所有框架,因为这是tailwind.js文件。

他们决定囊括所有内容,以避免人们遗漏任何东西。这是一种设计选择。我们现在需要删除东西,事实证明我们可以使用purgecss删除所有未使用的CSS类。

我还想从CSS中删除所有注释,并使其尽可能小。csnano是我们要寻找的。

我们可以自动化这些东西!首先,安装这些实用程序:

npm install cssnano
npm install @fullhuman/postcss-purgecss

然后我们将其添加到我们的PostCSS配置文件中postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = { plugins: [ require(‘tailwindcss’), require(‘autoprefixer’), cssnano({ preset: ‘default’ }), purgecss({ content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] }

在开发中,避免过多的处理

为什么?您添加的每个步骤都会减慢开发过程中的反馈周期。我使用此配置仅在生产中添加前缀并删除注释:

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = { plugins: [ require(‘tailwindcss’), process.env.NODE_ENV === ‘production’ ? require(‘autoprefixer’) : null, process.env.NODE_ENV === ‘production’ ? cssnano({ preset: ‘default’ }) : null, purgecss({ content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] }

免费下载我的CSS手册


更多CSS教程: