tailwind css_Tailwind CSS简介：实用程序优先CSS框架

tailwind css

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

视频：Tailwind CSS

在本教程中

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

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

什么是Tailwind 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值，它实际上是基准值（2.5rem）的乘数。
• 接下来：宽度，我们将其表示为： w-3/4 。 同样，该值需要解释。 这意味着四分之三的雷姆，即.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_banking_7jy4.svg" alt="Banking">
            </figure>
        </div>
    </div>

为了可视化我们有更好的东西， 请看一下Github仓库 。

要使该演示更进一步，请看一下上面嵌入的教程的视频版本。 您将学习使用NPM版本的高级功能，以及如何自定义使用的Tailwind CSS框架。

结论

仅使用实用程序类来控制标记的基本布局非常直观。 肯定有人会争辩说它不会将形式与结构分开，但是如果您发现它可以帮助您更快地构建网页，那么这肯定没有错！

翻译自: https://webdesign.tutsplus.com/tutorials/introduction-to-tailwind-css--cms-33545

tailwind css