听说你还不会 Tailwind CSS（基础·中篇）

发布于：2024-05-02 ⋅ 阅读:(22) ⋅ 点赞:(0)

1. 前言

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

2. 伪类

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

2.1 :hover

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

<button className="border-2 bg-black text-white hover:bg-white hover:text-black">
  button
</button>

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

hover.png

2.2 :focus

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

<input
  type="text"
  className="px-2 outline focus:outline-2 focus:outline-sky-500"
  placeholder="请聚焦这里..."
/>
  • outline 👉 outline-style: solid;
  • focus:outline-2, focus:outline-sky-500 👉
input:focus {
  outline: 2px solid #0ea5e9;
}

focus.png

2.3 :active

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

<button className="bg-sky-500 active:bg-pink-500">button</button>

active:bg-pink-500 👉

button:active {
  background-color: #EC4899;
}

active.png

3. 伪元素

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

3.1 ::before, ::after

<label className="block">
  <span className="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"
    className="mt-1 px-3 py-2 bg-white border placeholder-slate-400 rounded-md"
    placeholder="请输入你的邮箱..."
  />
</label>
  • block 👉 display: block;
  • before:content-['⭐️'], before:mr-2 👉
span::before {
  content: '⭐️';
  margin-right: 8px;
}
  • after:content-['*'], after:ml-0.5, after:text-red-500 👉
span::after {
  content: '*';
  margin-left: 2px;
  color: #ef4444;
}

before,after.png

3.2 placeholder

<input
  className="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

3.3 file input

<input
  type="file"
  className="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

3.4 selection

<div className="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

4. flex

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

4.1 两栏布局

<div className="flex h-screen">
  <div className="bg-red-200 w-48">left</div>
  <div className="bg-blue-200 flex-1">right</div>
</div>
  • flex 👉 display: flex;
  • flex-1 👉 flex: 1 1 0%;

两栏布局.png

4.2 水平垂直方向居中

<div className="flex justify-center items-center h-screen">
  <div className="bg-red-200 w-48 h-48">center</div>
</div>
  • flex 👉 display: flex;
  • justify-center 👉 justify-content: center;
  • items-center 👉 align-items: center;

水平垂直方向居中.png

4.3 两端对齐导航栏

<nav className="flex justify-between">
  <div className="cursor-pointer text-center bg-red-500 flex-1">Home</div>
  <div className="cursor-pointer text-center bg-green-500 flex-1">
    About
  </div>
  <div className="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

4.4 垂直方向菜单栏

<ul className="flex flex-col h-screen">
  <li className="border mb-2 py-4 px-2">#item1</li>
  <li className="border mb-2 py-4 px-2">#item2</li>
  <li className="border mb-2 py-4 px-2">#item3</li>
  <li className="border mb-2 py-4 px-2">#item4</li>
  <li className="border mb-2 py-4 px-2">#item5</li>
  <li className="border mb-2 py-4 px-2">#item6</li>
</ul>
  • flex 👉 display: flex;
  • flex-col 👉 flex-direction: column;

垂直方向菜单栏.png

5. grid

5.1 两栏布局

<div className="grid grid-cols-2 h-screen">
  <div className="bg-red-200">left</div>
  <div className="bg-blue-200">right</div>
</div>
  • grid 👉 display: grid;
  • grid-cols-2 👉 grid-template-columns: repeat(2, minmax(0, 1fr));

5.2 水平垂直方向居中

<div className="grid place-items-center h-screen">
  <div className="bg-red-200 w-48 h-48">center</div>
</div>
  • grid 👉 display: grid;
  • place-items-center 👉 place-items: center;

5.3 导航栏

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

5.4 图片画廊

<div className="grid grid-cols-3 gap-4">
  <img src="/next.svg" alt="image 1" className="w-full object-scale-down h-64" />
  <img
    src="/vercel.svg"
    alt="image 2"
    className="w-full object-contain h-64"
  />
  <img src="/next.svg" alt="image 3" className="w-full object-cover h-64" />
  <img
    src="/vercel.svg"
    alt="image 3"
    className="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

6. 定位

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

6.1 relative + absolute

<div className="relative h-40 border-2 bg-sky-200">
  <p>父容器</p>
  <div className="absolute top-10 left-10 size-48 bg-red-300">
    子元素A
  </div>
  <div className="absolute top-16 left-16 size-48 bg-green-300">
    子元素B
  </div>
  <div className="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

6.2 z-index

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

<div className="absolute top-16 left-16 size-48 bg-green-300 z-10">
  子元素B
</div>
  • z-10 👉 z-index: 10;

z-10.png

6.3 fixed

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

<button className="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

6.4 sticky

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

<ul className="h-40 border-2 overflow-auto">
  <nav className="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

7. 总结

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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布