概念 Concept

CSS: Framework 框架: Tailwind CSS 概念 Concept

装置断点前缀词

断点前缀词	宽度最小值	CSS
sm	640px	@media (min-width: 640px) { … }
md	768px	@media (min-width: 768px) { … }
lg	1024px	@media (min-width: 1024px) { … }
xl	1280px	@media (min-width: 1280px) { … }
2xl	1536px	@media (min-width: 1536px) { … }

行动装置优先

行动装置导向

<!-- 文字置中将会在手机上生效，而当萤幕大于等于 768px 时，将会靠左对齐 -->
<div class="text-center md:text-left"></div>

断点前缀词	宽度最小值	套用 CSS
sm	640px	text-center
md	768px	text-left
lg	1024px	text-left
xl	1280px	text-left
2xl	1536px	text-left

因此，通常最好优先设计手机的排版，接着在 sm 上修改，然后是 md ，以此类推。

单一导向断点

<div class="bg-green-500 md:bg-red-500 xl:bg-green-500">
  <!-- ... -->
</div>

断点前缀词	宽度最小值	套用 CSS
sm	640px	bg-green-500
md	768px	bg-red-500
lg	1024px	bg-red-500
xl	1280px	bg-green-500
2xl	1536px	bg-green-500

不必在 sm 或 xl 的断点上指定背景颜色，你只需要指定一个功能何时开始生效，而不是何时结束。

元件化

使用 @apply 提取元件 class

<button class="btn-indigo">
  Click me
</button>

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

使用 @apply 元件顺序

使用多个 @apply 设定顺序

无序

/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

有序

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

@apply 会将 !important 移除以避免出现优先权问题

/* Input */
.first {
  color: blue !important;
}

.second {
  @apply first;
}

/* Output */
.first {
  color: blue !important;
}

.second {
  color: blue;
}

设定 @apply !important

如果你希望使用 @apply 在现存的 class 并且给它 !important，只要在宣告的结尾加上 !important 即可：

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

指定元件层级为 components

为了避免非预期的意外，我们建议你将自定义元件的样式使用 @layer components { … } 指令包住来告知 Tailwind 这些样式属于哪一个层级：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}