Tailwin CSS 基础·中篇

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 布局、定位。

伪类

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

: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）。

hover.png

:focus

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

html 代码解读复制代码<input
  type="text"
  class="px-2 outline focus:outline-2 focus:outline-sky-500"
  placeholder="请聚焦这里..."
/>
  • outline 👉 outline-style: solid;
  • focus:outline-2, focus:outline-sky-500 👉
css 代码解读复制代码input:focus {
  outline: 2px solid #0ea5e9;
}

focus.png

:active

鼠标按住时就打开了 active 激活状态。

tsx

 代码解读
复制代码<button class="bg-sky-500 active:bg-pink-500">button</button>

active:bg-pink-500 👉

css 代码解读复制代码button:active {
  background-color: #EC4899;
}

active.png

伪元素

伪元素与伪类相似，不过表现得是像是往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。例如：::before、::after 等等。

::before, ::after

html 代码解读复制代码<label class="block">
  <span class="before:content-['⭐️'] before:mr-2 after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
  </span>
  <input
    type="email"
    name="email"
    class="mt-1 px-3 py-2 bg-white border placeholder-slate-400 rounded-md"
    placeholder="请输入你的邮箱..."
  />
</label>
  • block 👉 display: block;
  • before:content-['⭐️'], before:mr-2 👉
css 代码解读复制代码span::before {
  content: '⭐️';
  margin-right: 8px;
}
  • after:content-['*'], after:ml-0.5, after:text-red-500 👉
css 代码解读复制代码span::after {
  content: '*';
  margin-left: 2px;
  color: #ef4444;
}

before,after.png

placeholder

html 代码解读复制代码<input
  class="placeholder:italic placeholder:text-yellow-200 text-white bg-neutral-700 border rounded-md py-2 px-3"
  placeholder="请输入搜索内容..."
  type="text"
  name="search"
/>
  • placeholder:italic 👉 设置字体为斜体
  • placeholder:text-yellow-200 👉 设置颜色

placeholder.png

file input

html 代码解读复制代码<input
  type="file"
  class="block w-full text-sm text-neutral-700
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-cyan-50 file:text-cyan-700
              hover:file:bg-cyan-100
            "
/>
  • file:mr-4 file:py-2 file:px-4 👉 设置边距
  • file:rounded-full file:border-0 👉 设置边框
  • file:text-sm file:font-semibold 👉 设置字体
  • file:bg-cyan-50 file:text-cyan-700 👉 设置颜色
  • hover:file:bg-cyan-100 👉 设置悬浮效果

file-input.png

selection

tsx 代码解读复制代码<div class="selection:bg-amber-300 selection:text-amber-900">
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni fugit
    distinctio accusamus? Aliquid minus eaque, nostrum id perferendis
    autem labore architecto quasi quidem, neque recusandae voluptates quam
    nisi. Dolor, repellendus.
  </p>
</div>
  • selection:bg-amber-300 👉 设置选中时的背景颜色
  • selection:text-amber-900 👉 设置选中时的字体颜色

selection.png

flex

网页的骨架非常重要，而骨架的设计来源是布局。首先是 flex 布局。

两栏布局

html 代码解读复制代码<div class="flex h-screen">
  <div class="bg-red-200 w-48">left</div>
  <div class="bg-blue-200 flex-1">right</div>
</div>
  • flex 👉 display: flex;
  • flex-1 👉 flex: 1 1 0%;

两栏布局.png

水平垂直方向居中

html 代码解读复制代码<div class="flex justify-center items-center h-screen">
  <div class="bg-red-200 w-48 h-48">center</div>
</div>
  • flex 👉 display: flex;
  • justify-center 👉 justify-content: center;
  • items-center 👉 align-items: center;

水平垂直方向居中.png

两端对齐导航栏

tsx 代码解读复制代码<nav class="flex justify-between">
  <div class="cursor-pointer text-center bg-red-500 flex-1">Home</div>
  <div class="cursor-pointer text-center bg-green-500 flex-1">
    About
  </div>
  <div class="cursor-pointer text-center bg-blue-500 flex-1">
    Contact
  </div>
</nav>
  • flex 👉 display: flex;
  • flex-1 👉 flex: 1 1 0%;
  • cursor-pointer 👉 cursor: pointer;

两端对齐导航栏.png

垂直方向菜单栏

tsx 代码解读复制代码<ul class="flex flex-col h-screen">
  <li class="border mb-2 py-4 px-2">#item1</li>
  <li class="border mb-2 py-4 px-2">#item2</li>
  <li class="border mb-2 py-4 px-2">#item3</li>
  <li class="border mb-2 py-4 px-2">#item4</li>
  <li class="border mb-2 py-4 px-2">#item5</li>
  <li class="border mb-2 py-4 px-2">#item6</li>
</ul>
  • flex 👉 display: flex;
  • flex-col 👉 flex-direction: column;

垂直方向菜单栏.png

grid

两栏布局

html 代码解读复制代码<div class="grid grid-cols-2 h-screen">
  <div class="bg-red-200">left</div>
  <div class="bg-blue-200">right</div>
</div>
  • grid 👉 display: grid;
  • grid-cols-2 👉 grid-template-columns: repeat(2, minmax(0, 1fr));

水平垂直方向居中

html 代码解读复制代码<div class="grid place-items-center h-screen">
  <div class="bg-red-200 w-48 h-48">center</div>
</div>
  • grid 👉 display: grid;
  • place-items-center 👉 place-items: center;

导航栏

html 代码解读复制代码<nav class="grid grid-cols-3">
  <div class="cursor-pointer text-center bg-red-500">Home</div>
  <div class="cursor-pointer text-center bg-green-500">About</div>
  <div class="cursor-pointer text-center bg-blue-500">Contact</div>
</nav>
  • grid 👉 display: grid;
  • grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));

图片画廊

html 代码解读复制代码<div class="grid grid-cols-3 gap-4">
  <img src="/next.svg" alt="image 1" class="w-full object-scale-down h-64" />
  <img
    src="/vercel.svg"
    alt="image 2"
    class="w-full object-contain h-64"
  />
  <img src="/next.svg" alt="image 3" class="w-full object-cover h-64" />
  <img
    src="/vercel.svg"
    alt="image 3"
    class="w-full object-fill h-64"
  />
</div>
  • grid 👉 display: grid;
  • grid-cols-3 👉 grid-template-columns: repeat(3, minmax(0, 1fr));
  • gap-4 👉 gap: 1rem; /* 16px */
  • object-scale-down: object-fit: scale-down;
  • object-contain: object-fit: contain;
  • object-cover: object-fit: cover;
  • object-fill: object-fit: fill;

图片画廊.png

定位

默认的定位 position 为 static，另外除了它和 relative 定位都会脱离文档流，也就是像气球那样依次飘起来。

relative + absolute

html 代码解读复制代码<div class="relative h-40 border-2 bg-sky-200">
  <p>父容器</p>
  <div class="absolute top-10 left-10 size-48 bg-red-300">
    子元素A
  </div>
  <div class="absolute top-16 left-16 size-48 bg-green-300">
    子元素B
  </div>
  <div class="absolute top-24 left-24 size-48 bg-blue-300">
    子元素C
  </div>
</div>
  • relative 👉 position: relative;
  • absolute 👉 position: absolute;
  • top-10 👉 top: 2.5rem; /* 40px */
  • left-10 👉 left: 2.5rem; /* 40px */

还有另外两个方向：

  • bottom-* 👉 bottom: _;
  • right-* 👉 right: _;

relative + absolute.png

z-index

默认情况下，定位元素的 z-index 都是逐级递增的，就像上面那样，C > B > A。想要子元素 B 的 z 坐标最高，只要加上 z-* 即可：

html 代码解读复制代码<div class="absolute top-16 left-16 size-48 bg-green-300 z-10">
  子元素B
</div>
  • z-10 👉 z-index: 10;

z-10.png

fixed

固定定位，将添加按钮固定在右下方是移动端中的常用功能：

html 代码解读复制代码<button class="fixed bottom-10 right-10 size-10 text-white text-xl bg-purple-500 rounded-full">
  +
</button>
  • fixed 👉 position: fixed;
  • bottom-10 👉 bottom: 2.5rem; /* 40px */
  • right-10 👉 right: 2.5rem; /* 40px */

fixed.png

sticky

粘性定位，一般把导航栏贴在顶端：

html 代码解读复制代码<ul class="h-40 border-2 overflow-auto">
  <nav class="sticky top-0 bg-teal-500">navigation</nav>
  <li>#item1</li>
  <li>#item2</li>
  <li>#item3</li>
  <li>#item4</li>
  <li>#item5</li>
  <li>#item6</li>
  <li>#item7</li>
  <li>#item8</li>
  <li>#item9</li>
  <li>#item10</li>
</ul>
  • overflow-auto 👉 overflow: auto;
  • sticky 👉 position: sticky;
  • top-0 👉 top: 0;

sticky.png

总结

以上就是基础中篇的内容，下篇将介绍形变、过渡和动画相关内容。

posted @ 2024-11-03 16:16  AJun816  阅读(6)  评论(0)  编辑  收藏  举报