如何使用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手册