和其他的CSS框架有什么区别?
第一个阶段,原生写法
第二个阶段,CSS组件化。
这也是bootstrap,element ui,Antd,bulma
的做法。
第三个阶段,CSS零件化。
.left {float:left}
Tailwind CSS就是第三个阶段的产物,它做了什么呢?
举一个完整的例子,你可能需要实现下面这样一个效果:
按照我们正常的写法,需要这样写
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
但是使用Tailwind CSS
,你只需要这样写就可以
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>
极大的减少了代码量。
Tailwind CSS有什么优点?
可定制化程度极高。
响应式设计
@media only screen and (max-width:1280px) {
.img {
width:196px;
}
}
@media only screen and (max-width: 760px) {
.img {
width:128px;
}
}
但是在Tailwind CSS,一句话就能搞定:
<img class="w-16 md:w-32 lg:w-48" src="...">
超级方便。
一套专业的UI属性值
还有各种内边距外边距,宽高,文字大小行高颜色等等。即使你不懂设计,按照他内置的属性做出来的东西,也不会太差。
说了半天,Tailwind CSS和内联样式有什么区别?
有约束的设计。
响应式设计。
其他的很多特点,比如可维护性等等。
Tailwind CSS有什么缺点?
类名很长
<a href="#" class="text-sm font-medium bg-purple-600 rounded-full py-4 px-11 text-white inline-block border border-solid shadow hover:text-purple-600 hover:bg-white hover:border-purple-600 transition duration-300" role="button">Start Ticketing</a>