Tailwind CSS 简介：实用程序优先的 CSS 框架

今天我将向您展示如何开始使用 Tailwind css，这是一个高度可定制的 CSS 框架，您可以使用它来快速构建自己的网页和组件。它通过提供一个类列表来工作，您可以使用这些类来控制页面的每个视觉方面。

Tailwind CSS 简介：实用程序优先的框架第1张

在本教程中

这是即将发生的事情的细分。

什么是顺风 CSS？
使用 CDN 版本的简单示例
使用 NPM 版本的高级功能
自定义 Tailwind CSS

什么是顺风 CSS？

简而言之，Tailwind 是一个 CSS 框架，但它不同于 Bootstrap 和 Foundation 之类的框架。它只提供了您为自己的网页设置样式所需的原始基础知识，例如边距、大小、定位、颜色等。您不会找到现成的组件，例如按钮和导航栏——您可以使用 Tailwind 来构建自己的组件。这提供了极大的自由，许多现代框架只限制您构建的内容；没有必要覆盖任何东西！

使用 CDN 版本的简单示例

为了更好地了解这一切是如何工作的，让我们继续使用 Tailwind 构建一个简单的演示。

有两种使用 Tailwind 的方法；可以使用为我们托管的 CDN 版本，也可以通过 NPM 之类的管理器。使用 CDN 是最简单的，尽管它在某些方面限制了我们：

您无法自定义 Tailwind 的默认主题
您不能使用任何指令，如@apply,@variants等。
您无法启用诸如group-hover
您无法安装第三方插件

如果这些都不打扰您，请随意抓取CDN 链接并将其插入您的页面标题。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

完成后，让我们通过添加一个容器开始，其中包含另一个 div。

<div class="container">
<div class="">
<figure>
<img src="" alt=""/>
</figure>
</div></div>

我们还没有添加任何类，但可以随意使用虚拟内容填充它。

让我们添加一些 Tailwind 类。例如：

容器上沿 x 轴的边距，值为 auto。看起来像这样： mx-auto
顶部和底部的一些填充物怎么样？一样的想法： py-4。这里的4不是px值，实际上是base值的乘数，即2.5rem。
下一个：一个宽度，我们记为： w-3/4. 同样，这个值需要被解释。这意味着四分之三rem，即0.75rem。
flexbox 实用程序也可用，所以让我们在容器内的嵌套 div 中添加一些。 md:flex items-center意味着在我们使用的中等屏幕上display: flex;，我们规定弹性项目居中。

再加上一两个实用程序类，我们最终得到：

<div class="container mx-auto py-4 w-3/4">
<div class="md:flex items-center">
<figure class="md:flex-shrink-0">
<img class="md:w-64" src="undraw_online_***ing_7jy4.svg" alt="***ing">
</figure>
</div></div>