功能类优先

内置了很多类名，直接放在class属性中，以代替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>

现在：长长的class值。

<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>

大多数前端UI框架都有这一功能。用提供好的类名简化CSS。

有哪些功能类

官方文档：https://www.tailwindcss.cn/
学习Tailwind就是学习这些类名的作用。
想用就用，不必纠结。

举例：

<button class="px-4 py-2 mx-4 my-2 bg-green-500 hover:bg-green-700 rounded-lg">
	Click me
</button>

px-4：x轴方向的padding为4，1rem。
py-2：y轴方向的padding为2，0.5rem。

mx-4：x轴的margin。
my-2：y轴的margin。

bg-green-500：背景色。
hover:bg-green-700：鼠标悬停时，背景色。

rounded-lg：圆角，0.5rem。

效果：

好处在哪里

• 不需要起很多类名。因为都用的它的。
• CSS停止增长。开发阶段不用再写那么多的CSS。
• CSS互不影响。各自用各自的类名，不会产生冲突。

class太长了怎么办

class抽取：把一堆class写进一个class里面。

之前：

<button class="px-4 py-2 mx-4 my-2 bg-green-500 hover:bg-green-700 rounded-lg">
	Click me
</button>

之后：

<style>
	.hello {
      
      
		@apply px-4 py-2 mx-4 my-2 bg-green-500 hover:bg-green-700 rounded-lg;
	}
</style>

<button class="hello">
	Click me
</button>