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