Tailwin CSS 基础·中篇

方便自己查看，仅做摘录，非原创。

原文链接

听说你还不会 Tailwind CSS（基础·上篇）Tailwind CSS 的基础使用：从宽度高度开始逐步展现 Tai - 掘金 (juejin.cn)

听说你还不会 Tailwind CSS（基础·中篇）Tailwind CSS 的基础使用：包含伪类、伪元素、flex 和 - 掘金 (juejin.cn)

听说你还不会 Tailwind CSS（基础·下篇）这是 Tailwind CSS 的基础使用的终篇：包括形变、过渡效果 - 掘金 (juejin.cn)

听说你还不会 Tailwind CSS（进阶·上篇）Tailwind CSS 的进阶使用（上篇）：如何复用样式以及自定义 - 掘金 (juejin.cn)

听说你还不会 Tailwind CSS（进阶·下篇）Tailwind CSS 的进阶使用（下篇）：配置项讲解。样式的覆盖 - 掘金 (juejin.cn)

听说你还不会 Tailwind CSS（响应式篇）讲解传统响应式和 TailwindCSS 中的响应式，有了 Tailw - 掘金 (juejin.cn)

Tailwind CSS | Pure Admin 保姆级文档 (pure-admin.github.io)

前言

上篇介绍了宽高、边距、边框、文本、颜色等常用基础属性，本篇继续基础内容，包括伪类、伪元素、flex 和 grid 布局、定位。

• 听说你还不会 Tailwind CSS（基础·上篇）
• 听说你还不会 Tailwind CSS（基础·中篇）
• 听说你还不会 Tailwind CSS（基础·下篇）
• 听说你还不会 Tailwind CSS（进阶·上篇）

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

:hover

鼠标悬浮在元素上面时出现的效果。

html 代码解读复制代码<button class="border-2 bg-black text-white hover:bg-white hover:text-black">
  button
</button>

只要在想要实现 hover 效果的类名前添加 hover: 就可以了，例如上面悬浮时的按钮背景颜色被置为白色（hover:bg-white）、文字颜色置为黑色（hover:text-black）。

:focus

按钮、输入框等表单控件聚焦时出现的效果。

html 代码解读复制代码<input
  type="text"
  class="px-2 outline focus:outline-2 focus:outline-sky-500"
  placeholder="请聚焦这里..."
/>

• outline
  标签：flex,中篇,Tailwind,代码,Tailwin,复制,grid,CSS
  From： https://www.cnblogs.com/AJun816/p/18523561