跳到主要内容

4.4-tailwindcss

Create by fall on:2022-03-10
Recently revised in:2022-07-11

Tailwindcss​

优点

  • 在别人想 css 命名时，不去可以不用去命名，直接一套样式下去
  • 别人写的组件，复制粘贴就能用，不用考虑再引入 css 文件
  • 所有页面使用相同的 CSS 样式表最终 css 产物更小
  • 提供统一严谨的代码开发风格
  • 写更少的样式（display:flex;-> flex ）

缺点

  • 学习成本：还要自己重新记忆一遍所有的类名，语义化减少了一部分
  • 复杂的样式书写，可读性差（行内书写 class 时）
  • 扩展新的 css 会重新构建，速度较慢（V3 已经解决）

安装​

使用​

不建议和其它诸如，less、scss 一起使用，不建议使用 css modules，tailwindcss，不需要 CSS 样式隔离，并且会降低开发时的编译速度

基本用法​

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
    <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
  </div>
</div>

伪类​

<!-- 基本伪类用法 -->
<button class="bg-indigo-500 hover:bg-indigo-600 "></button>
<!-- dark: tailwind 添加的伪类，以及多个伪类一起书写，源自于 media query 的 prefers-color-scheme -->
<button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-pink-500 dark:hover:bg-zinc-500"></button>
<!-- sm: 、md: 等一系列宽度伪类 -->
<button class="bg-indigo-500 hover:bg-indigo-600 sm:w-8"></button>
<!-- 拥有，data-active 时启用 -->
<div data-active class="border border-gray-300 data-active:border-purple-500"> </div>
<!-- *: 对所有直系子元素有效 -->
<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
  <li>Sales</li>
  <li>Marketing</li>
</ul>
<!-- 自定义 -->
<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p>
  <div class="bg-pink-200">
      <p>Lorem ipsum...</p>
  </div>
</div>

这些类似于伪类的书写方法，来自于 css 中的内容

复杂样式​

<!-- 渐变的用法 https://tailwindcss.com/docs/background-image  -->
<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>
<div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>

任意值​

<!-- 任意值使用 [] 进行包裹  -->
<button class="bg-[#316ff6] max-h-[calc(100dvh-(--spacing(6))]"> World </button>
<!-- 任意变量使用 () 进行包裹  -->
<button class="bg-(--primary) max-h-[calc(100dvh-(--spacing(6))]"> World </button>
<style>
  .btn{
    /* bg-(--primary) 等价于 */ 
    background-color:var(--primary);
  }
</style>

复杂选择器​

<!-- 多个伪类同时使用 -->
<button class="dark:lg:data-current:hover:bg-indigo-600">  Button </button>
<style>
  /* 解析后是这样的 */
  @media (prefers-color-scheme: dark) and (width >= 64rem) {
    button[data-current]:hover {
      background-color: var(--color-indigo-600);
    }
  }
</style>
<!-- group 分组 -->
<a href="#" class="group rounded-lg p-8">
  <span class="group-hover:underline">Read more…</span>
</a>
<style>
  /* 解析后是这样的 */
  @media (hover: hover) {
    a:hover span {
      text-decoration-line: underline;
    }
  }
</style>
<!-- 选择器 []: 选择器之间使用 _ 代替空格 -->
<div  class="[&>[data-active]+span]:text-blue-600">
  <span data-active>666</span>
  <span>这些文本将会变色</span>
</div>
<style>
  /* 解析后是这样的 */
  div > [data-active] + span {
    color: var(--color-blue-600);
  }
</style>

其它​

<!-- 多个伪类同时使用 -->
<div class="bg-teal-500 bg-red-500!">  <!-- ... --> </div>
<!-- in-*，代替 group， -->
<div tabindex="0">
  <div class="opacity-50 in-focus:opacity-100"> 父元素被 hover 时触发
		Child 1
  </div>
</div>
<!-- peer 兄弟被触发 -->
<fieldset>
  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">foo</label>
  
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" class="is-dirty peer" required />
  <div class="peer-[.is-dirty]:peer-required:block hidden">该项为必填</div>
</fieldset>

配置​

/* 配置前缀 */ 
@import "tailwindcss" prefix(tw);
/* 配置 dark mode，默认匹配 prefers-color-scheme，以及 dark 是否在顶层的 dom 树上 */
@custom-variant dark (&:where(.dark, .dark *));

自定义主题​

@theme {
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  /* 定义颜色 */
  --color-lagoon: oklch(0.72 0.11 221.19);
}
<div tabindex="0">
  <div class="opacity-50 in-focus:opacity-100"> 父元素被 hover 时触发
		Child 1
  </div>
</div>

参考文章​

作者链接