tailwindcss开发实践

背景

之前我们项目中采用的是sass+css module的开发模式。但是在使用中发现它有以下几个缺点：

随着版本不断迭代、样式文件体积持续增长。
随着版本不断迭代、scss文件中臃余代码累计、难以删除。
写样式前还得花心思给取个类名。

搜索社区中其他css架构方案，发现tailwindcss能解决以上几个痛点，这里分享下tailwindcss+cssInJs的css方案。

what is tailwindcss?

先来看下官网的介绍：

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。

它不同于bootstrap、Bulma等前端ui库，提供已经写好的组件。更像是之前的原子化css,将css属性颗粒化，生成对应的功能class。

相较原子css它还支持伪类、响应式。并且可高度自定义。

why tailwindcss?

我们先看下当我们要开发一个下图所示组件时，以传统方式编写和以tailwindcss编写的比较。

传统方式

taiilwindcss

可以看到传统上，当你的web需要样式时，你就得要编写css代码。但是使用tailwindcss，你只需要将功能css进行组装即可，并且还有以下几个好处：

你不需要耗费大量精力去给class起名字。

不再需要添加像chat-notification-logo-wrapper这样的愚蠢的类名，只是为了能够样式化某些东西，也不必为真正只是一个flex容器的东西而烦恼完美的class.

你的css文件体积将停止增长

使用传统方式时，每次新增特性你的css文件体积总会增大，但是使用tailwindcss的功能类，所有东西都是可重用的，因此很少需要编写新的CSS。

更改样式感觉更安全

使用tailwindcss更改样式就是添加或删除功能类，它只作用于当前元素、所以可以放心修改、而不会影响其他。

how to use tailwindcss

1、安装依赖

# Using npm
npm install tailwindcss

2、添加tailwind到css代码中

这里说明一下这三个的作用：

base:

用来重置浏览器样式的、其实就是打包normalize.css的样式，如果项目中自己有做处理，就可以不引用。
components:

tailwind定义的一些组件类，目前只有一个container类，与bootstrap的container类作用一样，如果不需要也不需要引用。
utilities:

这个是tailwind的核心，引入了这个tailwindcss才会去生成对应的属性类。

配置postcss插件来使用tailwindcss处理css文件

如下图，在postcss.config.js中添加tailwindcss插件

安装代码提示插件

我们可能会觉得tailwindcss这么多属性类。。。那里记得住-～-。放心，安装tailwindcss VSCode插件后，智能代码提示，就不用担心自己记不住拉。

输入自动提示 hover提示

tailwind的特性

1、响应式类(Responsive Design)

如果我们的页面需要在不同大小屏幕下有不同的表现，这个是够我们就可以使用响应式类，例如：

<div class="bg-white lg:bg-red">
	hello world
</div>

上面代码大屏以上背景颜色为红色，大屏以下是白色

tailwindcss默认响应式类我们可以根据项目中的实际场景，去自定义自己的一套屏

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }
      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }
      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

2、变体（variants）

使用tailwindcss 不仅可以使用普通的一些功能类，还能使用hover:、focus:、active:等等这些变体类。

这里列举下tailwindcss目前支持的变体类

1、hover

添加 hover: 前缀，以在 hover 状态时应用一个功能类。

<button class="bg-red-500 hover:bg-red-700 ...">
  Hover me
</button>

2、active

添加 active: 前缀，以在元素处于 active 状态时应用某个功能。

<button class="bg-green-500 active:bg-green-700 ...">
  Click me
</button>

3、group-hover

如果您需要当鼠标悬停在一个指定的父元素上时对其子元素设置样式，给父元素添加 group 类，并且为子元素的功能类添加 group-hover: 前缀。

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
</div>

4、group-focus

group-focus 变体的工作方式与 group-hover 一样

<button class="group bg-yellow-500 focus:bg-yellow-600 ...">
  <svg class="text-white group-focus:text-yellow-300 ..."></svg>
  Bookmark
</button>

5、focus-within

添加 focus-within: 前缀，以便仅在一个子元素获得焦点时才应用功能类。

<form>
  <div class="text-gray-400 focus-within:text-gray-600 ...">
    <div class="...">
      <svg fill="currentColor"></svg>
    </div>
    <input class="focus:ring-2 focus:ring-gray-300 ...">
  </div>
</form>

6、disabled

添加 disabled: 前缀，以便当一个元素被禁用时才应用功能类。

<button class="disabled:opacity-50 ..." disabled>
  Submit
</button>

7、visited

添加 visited: 前缀，以便当一个链接被访问后才应用功能类。

<a href="#" class="text-blue-600 visited:text-purple-600 ...">Link</a>

8、Checked

添加 checked: 前缀，以便当一个单选或复选框被选中时才应用功能类。

<input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent ...">

9、First-child

添加 first: 前缀，以仅当元素是父元素的第一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform first:rotate-45 ...">
    {{ item }}
  </div>
</div>

10、Last-child

添加 last: 前缀，在仅当元素是父元素的最后一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform last:rotate-45 ...">
    {{ item }}
  </div>
</div>

11、Odd-child

添加 odd: 前缀使得仅在元素是父级奇数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform odd:rotate-45 ...">
    {{ item }}
  </div>
</div>

12、Even-child

添加 even: 前缀使得仅在元素是父级偶数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform even:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要注意下、tailwindcss考虑到开发时css文件到体积、大部分变体类是没有生效的，如果在项目中需要使用到某些变体类，则需要添加以下配置

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      // 前面是功能属性、后面数组是要生效的变体
      backgroundColor: ['even','odd'...],
    }
  },
}

注意生成class的顺序会根据数组中变体的顺序生成

3、darkMode(深色模式)

要启用深色模式，需要添加配置

// tailwind.config.js
module.exports = {
  darkMode: 'media', // media or class
  // ...
}

然后dark其实也是一种变体，需要添加变体配置

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

media 策略在底层使用 prefers-color-scheme 媒体功能，但是，如果您想支持手动切换深色模式，您也可以使用 'class' 策略进行更多控制。

体积优化

添加purge配置

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,  // 是否启用
    content: ['./src/**/*.html'], // 检查文件
  },
  // ...
}

建议开发时，enabled：false，避免开发时一直构建。

jit模式( just-in-time mode)

开启配置

  // tailwind.config.js
  module.exports = {
   mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

开启jit模式后,tailwindcss 会扫描purge中配置的模版文件去动态按需生成css文件。在开发和生产都是按需生成，避免了在开发环境中生成所有的样式代码，提升了开发时性能和体验。

jit新特性

所有变体都默认生效

在之前版本中，大部分变体都是需要在tailwindcss.config.js中配置才会生效，而在jit开启后，所有变体都默认生效，不需要再去添加配置。

变体类可组合

所有变体都可以组合在一起，以轻松定位非常特定的情况，而无需编写自定义 CSS

支持随意数值属性设置

虽然jit模式支持随意值，但是不建议使用，这会破坏项目设计、代码都维护性。

<!-- Sizes and positioning -->
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">

<!-- Colors -->
<button class="bg-[#1da1f1]">Share on Twitter</button>

<!-- Complex grids -->
<div class="grid-cols-[1fr,700px,2fr]">
  <!-- ... -->
</div>

支持!important类

在类前面加！,就可生效!important

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

支持伪元素变体

JIT 模式添加了对样式伪元素的支持，例如 ::before、::after、::first-letter、::first-line、::marker 和 ::selection。

设置每条边的颜色

<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">
  <!-- ... -->
</div>

设置光标颜色

<input class="caret-red-500">

兄弟元素选择器

类似group、group:hover的使用，兄弟选择器可以如以下格式编写

<label>
  <input type="checkbox" class="peer sr-only">
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
  <!-- ... -->
</label>

jit模式引入variants类配置

之前变体类是包含在utilities、现在是variants中，然后去掉了screens

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
- @tailwind screens;
+ @tailwind variants;

与styled-component组合使用

tailwindcss不可能囊括我们项目开发中所有的样式代码。

1、比如我们使用类第三方ui库，需要更改其样式。

这些用tailwindcss去设置就不那么方便了，这个时候我们就需要借助styled-component来进行样式编写来。

最后

tailwindcss支持高度自定义属性类格式、官方默认的并不一定适用自己，可以根据自己团队规范以及习惯进行自定义配置。