Skip to main content

Setup TailwindCSS

TailwindCSS 是用过的人都说好，没用过的觉得谁有脑子记那么多 class name 呢？ 不管怎么说，优点很多：

  1. 可以直接写 css，无需管理 css 文件，即不用使用的时候 import，无用的还得手动删除，嵌套还得找父子级关系
  2. 生成一个 css 文件，全局公用，最终的 css 文件很小
  3. 在 layer 层全局定义变量，可以非常简单的定义全局主题样式
  4. 虽然 class name 很多，但实际使用的并不多，而且语义化很好记

Installation​

直接 follow 官网：https://tailwindcss.com/docs/installation

一般会遇到的问题是写的 css 属性不生效，多半是 tailwind.config.js 中的 content 字段没有包含自己的代码，我一般配置为：

{
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'];
}

给 TailwindCSS 加 prettier​

加了 prettier，css name 的顺序就有了一致性，不用担心每个人的风格不同些的乱糟糟。

  1. 安装插件包：
npm i prettier-plugin-tailwindcss -D
  1. 在 .prettierrc.js 中追加配置：
plugins: ['prettier-plugin-tailwindcss'],

自动 merge 重复的 class name​

有很多场景我们会重复设置相同属性的 class。比如按钮的宽度，默认可能是 w-40 ，但是有的页面需要个性化为 w-20 ，由于这个按钮组件本身已经自带样式，只能在原来的样式基础之上追加：

<Button className="w-20" />

导致最终生成的代码会出现 w 属性重复：

<button class="w-40 w-20" />

那么这里的 w-40 就是冗余的。

使用插件tailwind-merge来解决这个问题：

npm i tailwind-merge

在项目中写一个调用的方法，比如

import { extendTailwindMerge } from 'tailwind-merge';

export const clsMerge = extendTailwindMerge({
  classGroups: {
    'font-size': ['text-xxs', 'text-sm'],
  },
});

使用的时候：

<Button className={clsMerge('text-base', className)} />
note

这里扩展了 font-size 属性，是因为官方不支持这个属性的覆盖，需要自己扩展

官方参考：https://github.com/dcastil/tailwind-merge

禁用自带的样式​

一般项目中我们会有自己的默认样式，所以可以禁用自带的 basic 样式，修改tailwind.config.js

...
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
    darkMode: 'class',
    corePlugins: {
        preflight: false,
    },
...

官方文档：https://tailwindcss.com/docs/preflight#disabling-preflight

插件​

文本截断：@tailwindcss/line-clamp

clamp 插件已内置，无需额外安装。