tailwind css_如何使用PurgeCSS和PostCSS设置Tailwind

tailwind css

I recently set out to move my blog CSS to Tailwind.

我最近着手将博客CSS移至Tailwind 。

Tailwind is an interesting framework because instead of providing a set of widgets like Bootstrap or others, it provides utilities.

Tailwind是一个有趣的框架，因为它没有提供一组Bootstrap或其他类似的小部件，而是提供了Utility 。

I find it resonates a lot with how I work with HTML.

我发现它与HTML的使用方式共鸣。

I introduced how I use Tailwind with Vue in a previous post, but without a build tool in place already, it can be hard to get the correct setup right, and I decided to write this blog post even just for me to remember later on 🙃

我在上一篇文章中介绍了如何在Vue中使用Tailwind和Vue ，但是如果没有适当的构建工具，可能很难正确设置设置，因此我决定写这篇博客，甚至是为了让我以后记得

In this post I explain how to use Tailwind with any kind of project.

在这篇文章中，我将说明如何在任何类型的项目中使用Tailwind。

安装Tailwind (Install Tailwind)

First step is to install Tailwind, using npm or yarn:

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

npm init -y
npm install tailwindcss

创建配置文件 (Create the configuration file)

Next, use this command to create a configuration file:

接下来，使用此命令来创建配置文件：

npx tailwind init

This will create a tailwind.config.js file in the root of your project, adding the basic Tailwind configuration.

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

配置PostCSS (Configure PostCSS)

Now you need to tweak the PostCSS configuration to make sure Tailwind runs. Add:

现在，您需要调整PostCSS配置，以确保Tailwind运行。 加：

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

to your postcss.config.js. Create one if it does not exist.

到您的postcss.config.js 。 如果不存在，请创建一个。

I also added autoprefixer for convenience, you’ll likely need it. Install it with npm install autoprefixer.

为了方便起见，我还添加了autoprefixer，您可能会需要它。 使用npm install autoprefixer进行npm install autoprefixer 。

Oh, also make sure you installed PostCSS (npm install -g postcss-cli)

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

创建Tailwind CSS文件 (Create the Tailwind CSS file)

Now create a CSS file where you want, like in tailwind.css and add

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

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

创建构建命令 (Create the build command)

Now open your package.json file, and add a scripts section if you don’t have it:

现在打开package.json文件，如果没有，请添加一个脚本部分：

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

建立尾风 (Build Tailwind)

Now from the command line run npm run build:css will build the final CSS file.

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

The resulting file is in static/dist/tailwind.css (you can change the location in the above command).

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

更改文件后自动重新生成CSS (Automatically regenerate the CSS upon file changes)

Every time I change something in the theme HTML (stored in the layouts folder in my case), I want to regenerate the CSS, and trigger the purge and minification I set up.

每次更改主题HTML(在我的情况下存储在layouts文件夹中)中的某些内容时，我都想重新生成CSS，并触发设置的清除和缩小。

How to do this?

这该怎么做？

Install the watch npm package:

安装watch npm软件包：

npm install watch

and add the watch script to your package.json file. You already had build:css from before, we just add a script that watches the layouts folder and runs build:css upon every change:

并将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"
}

Now run npm run watch and you should be good to go!

现在运行npm run watch ，您应该一切顺利！

修剪文件大小 (Trim the file size)

If you check, the resulting file is huge. Even if you don’t use any Tailwind class in your HTML, all of the framework is included by default, because that’s the default configuration in the tailwind.js file.

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

They decided to include all, to avoid people missing things. It’s a design choice. We now need to remove stuff, and it turns out we can use purgecss to remove all the unused CSS classes.

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

I also want to remove all comments from the CSS and make it as small as possible. cssnano is what we’re looking for.

我还想从CSS中删除所有注释，并使其尽可能小。 我们正在寻找cssnano 。

We can automate this stuff! First, install those utilities:

我们可以自动化这些东西！ 首先，安装这些实用程序：

npm install cssnano
npm install @fullhuman/postcss-purgecss

Then we add this to our PostCSS configuration file postcss.config.js:

然后，将其添加到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) || []
    })
  ]
}

在开发中，避免过多的处理 (In development, avoid too much processing)

Why? Every step you add slows down the feedback cycle while developing. I use this config to only add prefixes and removing comments in production:

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

postcss.config.js

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) || []
    })
  ]
}

翻译自: https://flaviocopes.com/tailwind-setup/

tailwind css