tailwind.css一款高度可定制化的css框架，他有以下的特点：
自适应
tailwind.css也是一款自适应的框架，在不同的分辨率设备上显示不同的排列布局
组件丰富
她内置了各种预先设计的组件，如按钮、卡片和警报，这些组件可能会帮助您在开始时快速移动，但当您的网站通过定制设计脱颖而出时，它们会带来比治愈更多的痛苦。
Tailwind提供了低级别的实用程序类，可以让您在不离开HTML的情况下构建完全自定义的设计，而不是固定的预先设计的组件。
响应变量
每一个tailwind实用程序都有响应变量，这使得在不使用定制css的情况下构建响应界面变得非常容易。
tailwind使用了一个直观的{screen}：前缀，使得在标记中很容易注意到响应类，同时保持原始类名的可识别性和完整性。
组件友好型
虽然您可以只使用实用程序类做很多事情，但是随着项目的发展，将公共模式编码为更高级别的抽象可能会很有用。
tailwind提供了从重复的实用程序模式中提取组件类的工具，使从一个位置更新组件的多个实例变得容易：
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<link href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="md:flex bg-white rounded-lg p-6">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="https://randomuser.me/api/portraits/women/17.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">Erin Lindford</h2>
<div class="text-purple-500">
Customer Support
</div>
<div class="text-gray-600">
erinlindford@example.com
</div>
<div class="text-gray-600">
(555) 765-4321
</div>
</div>
</div>
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
Marketing
</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">
Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
</p>
</div>
</div>
<!-- Using utilities: -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Button
</button>
</body>
</html>
{{collectdata}}
网友评论0