0
点赞
收藏
分享

微信扫一扫

Tailwind CSS 浅析

JamFF 2022-01-08 阅读 71

和其他的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>

熟悉使用有成本

那我要不要学习Tailwind CSS?

要不要对以前的项目用Tailwind CSS进行重构?

是不是以后可以放弃bootstrap之类的框架了?

听说Tailwind CSS的文件很大是不是?

举报

相关推荐

0 条评论