几秒钟即可上手 TailwindCSS。

首先，做个简短的介绍……

“介绍就到此为止，我要开始了！​​”

“嘿！这篇文章明明是关于如何在几秒钟内快速上手，你却让我读了一篇文档的改写版！”

如果您熟悉 Tailwind 并且只想立即开始使用，请点击这里。

首先，做个简短的介绍……

对于不太了解的人来说，TailwindCSS是一个 CSS 实用工具框架，它正迅速发展壮大。它允许你以可配置类工具的形式轻松创建易于维护的样式。

<h1 class="font-bold text-6xl leading-none tracking-tight pb-4">Hello world!</h1>

解析结果为：

 h1 {
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.025em;
  padding-bottom: 1rem;
}

我觉得非常棒。另一个很实用的功能是 Tailwind 的指令，例如@apply。

使用`@apply`，我们可以轻松创建类组件。假设你有一个设计系统，所有按钮都具有某种样式。与其输入……，不如直接使用`@apply` 来创建类组件。

<button class="bg-blue-600 py-8 px-10 my-8 text-white font-bold">Click me</button

对于网站上的每个按钮，您可以简单地执行以下操作

button {
  @apply bg-blue-600 py-8 px-10 my-8 text-white font-bold;
}

并相应地更改全局规则——就像原生 CSS 一样。

“介绍就到此为止，我要开始了！​​”

当然可以！要开始使用 Tailwind CSS，请在您的项目中写入 `<script>` npm i tailwindcss（或 `<script> yarn add tailwindcss`）。然后，将`@tailwind`指令添加到您的 CSS 中。

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

然后，只需使用 PostCSS 处理 CSS npx tailwind build style.css -o output.css，或者将 Tailwind 作为 PostCSS 插件引入即可。我更喜欢后者，因为它很容易与你自己的工具集成。

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

控制捆绑包大小

现在，使用 Tailwind CLI/插件，最终打包后的文件大小约为 600kb——这是压缩后的大小。这相当大。一个只打包你正在使用的 CSS 的好方法是purgecss在你的项目中进行配置。这将从purgecss你的文件中移除所有未使用的样式——是的，包括 Tailwind 的样式。

将 Purgecss 添加到您的项目中本身就是一个包含多个步骤的过程，您最好阅读Tailwind 文档中关于 bundle size 的部分，了解所有这些是如何工作的。

“嘿！这篇文章明明是关于如何在几秒钟内快速上手，你却让我读了一篇文档的改写版！”

您说得完全正确。我觉得有必要先做一些介绍，以防有人之前没听说过 Tailwind CSS。但对于那些已经了解 Tailwind CSS，或者读完本文后至少有兴趣尝试一下的人，我创建了一个小工具，可以用来快速搭建一个新的 Tailwind 项目。

npx tailwindcss-parcel-boilerplate

只需运行上述命令，即可在几秒钟内启动并运行您自己的 Tailwind 项目。它使用Parcel来监视和打包您的文件，并在构建时使用Purgecss。使用这种方式进行开发不会降低速度，并且最终还能获得非常小的打包体积。

.
├── src
│   ├── assets
│   │   ├── css
│   │   │   └── style.css
│   │   └── js
│   │       └── index.js
│   └── index.html
├── package.json
└── postcss.config.js

正如承诺的那样，只需几秒钟即可完成 Tailwind 的设置。

希望我的工具对您有所帮助。如果您有任何补充，请访问我的GitHub仓库。

干杯!