tailwindcss 的使用

前言

优缺点

  • 灵活， 原子化的样式，可以自由组合
  • 普适性强， 和各种组件，框架容易结合
  • 可定制性强，支持 component 封装， theme 定制
  • 效率高， 内置 JIT 模式

如何配置

最重要的配置就是 tailwind.config.js 文件， 里面指定要处理编译的内容，配置的主题和插件等。tailwind 提供的配置文件有： tailwindcss/stubs at master · tailwindlabs/tailwindcss， 里面可以查看到 config.full.js

直接 cli 处理

Installation - Tailwind CSS，通过监听文件，自动编译。

postcss 结合

还可以进一步结合 css module, 隔离样式作用域。 Using with Preprocessors - Tailwind CSS

常用可能结合的插件：

  • postcss-import
  • tailwindcss/nesting

css-in-js 结合

我之前的项目中，常用 emotion, 如果再想引入 tailwindcss 可以使用 ben-rogerson/twin.macro: 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.。对 emotion 做了封装。

功能解读

一共有多少 class?

构建都走了优化，看不出 tailwindCSS 一共有多少的 class 了， 有人和我有同样的问题： How do I get a list of all tailwind classes/utilities in development? · tailwindlabs/tailwindcss · Discussion #10379

可以跑个 V1 的项目，大概能看出来全部属性，有 99667 行。其中：

JIT

V3 已经是内置的功能了， The new Just-In-Time engine we announced in March has replaced the classic engine in Tailwind CSS v3.0. 使得可以按需生成 CSS.top-[113px] => top: 113px.

Functions & Directives

Functions & Directives - Tailwind CSS

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 * [Preflight - Tailwind CSS](https://tailwindcss.com/docs/preflight)
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;

默认编译的 components 没有东西， 只有 Container - Tailwind CSS 是一个内置的 componet, 其他都是 utilities.

variants 是写不写都会添加的。如果你正在使用 Tailwind CSS v2.1+ 并且启用了 JIT 模式，那么实际上不再需要手动配置 variants。所有的 variants 都是默认启用的，你可以自由地使用它们来控制 utility classes 在不同状态下的表现。

@layer 扩展属性

Tailwind will automatically move the CSS within any @layer directive to the same place as the corresponding @tailwind rule, so you don’t have to worry about authoring your CSS in a specific order to avoid specificity issues.

@apply

和 css 文件结合使用的时候，

plugins

比如为字体，动画添加了对应的样式。

core plugins: Configuration - Tailwind CSS,列出了默认的内置 plugin, 比如：

使用技巧

最简单的使用方式，就是为每个元素，添加 class, 控制样式。

但是当和一些第三方组件结合的时候，我们难免需要控制一些全局，或者局部子元素的样式。

全局样式

  • 一个全局文件，比如 globals.css 中， 通过配置 @apply base {} 扩展。

如何为子元素添加样式

当和一些其他组件结合的时候，想要覆盖组件内部的样式。

  • 子元素如何能设置 className , 优先直接设置
  • 使用 arbitrary variants 自定义选择器： [&_p]:mt-4
  • 全局样式覆盖， 通过 @apply 扩展, 可以直接 cli 或者 postcss 方案
  • 配合 less, sass, css module, 还是创建 class, 通过 @apply 添加样式， 通过 postcss 方案
  • css-in-js 中， 配合 twin.macro 方案

和 antd 结合

如果组件支持 className, 配置好的话，可以直接使用， 如果是需要覆盖子元素的话， 需要使用 postcss 或者 css-in-js 方案。

hongfaqiu/nextjs13-with-antd-tailwindcss: Next.js13 app dir with Antd 5 & tailwindcss

和 tailwindCSS 结合

tailwindCSS 自身是带了一套类似的样式方案，如果项目中，还需要配置第三方的组件库， 可以考虑在 tailwindCSS 基础上， 配合 twin.macro 方案。

和 Shadcn 结合

这本身就是 headless + tailwindCSS 方案， 最完美

Dark Mode

By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually using the ‘class’ strategy.

切换成 class 控制， 能更好的和 next-theme 等工具结合，让 mode 受控。 Dark Mode - Tailwind CSS

自适应方案

Responsive Design - Tailwind CSS

断点作为 pseudo 的使用： Handling Hover, Focus, and Other States - Tailwind CSS

各种 pseudo, media, selectors

Handling Hover, Focus, and Other States - Tailwind CSS

特别是 selectors 这里， 是支持：

  • ARIA states: aria-checked => &[aria-checked=“true”]
  • Data attributes: data-[size=large]:p-8
  • RTL support: ltr:ml-3
  • open/close states: 当配合 <details> 或者 <dialog> 组件，才会带有的属性， open:bg-white

arbitrary values 自定义样式

灵活的自定义样式方式： 属性值是支持 Adding Custom Styles - Tailwind CSS 的：

property value 属性的值

  • top-[113px]
  • 支持使用 theme 的方法， grid-cols-[fit-content(theme(spacing.32))]
  • 支持 CSS Variables, bg-[--my-color]

properties 属性

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>

variants

Handling Hover, Focus, and Other States - Tailwind CSS

<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p>
  <ul>
    <li>
      <p>Lorem ipsum...</p>
    </li>
    <!-- ... -->
  </ul>
</div>

通过 _ 分割出选择器， 生成：

.\[\&_p\]\:mt-4 p {
    margin-top: 1rem;
}

whitespace 默认使用 _

如果属性值有空格， 写的时候，用 whitespace 占位， 编译是会自动替换成空格。不需要替换的， 添加 \ 即可。

维护组件

技术总结

值得入手。