作者:SSSS
https://juejin.cn/post/7237425753612288055
现在再提 tailwind css 也不是什么比较新鲜的事情了,已经有很多介绍的文章了,到目前来说,应该有不少新项目开始尝试使用它来开发样式了。比如说,next.js 的 cli 已经用 tailwind css 替代 css modules 了:
很早的时候其实就想接入 tailwind css 尝试了,原因无非就是那几样,原子化,design token,更主要的是终于不用再为 class 的命名去伤脑经了,但劝退我使用 tailwind css 的几个因素:
但后面还是还是接入了,接入以后发现上面的提到的劝退点还是不值一提的,对于问题1,实际使用的时候配合上 vscode 插件陈本还是比较低的,而且 tailwind css 的 命名还是有一定规律的,比如宽度,基本上就是 w-[value/4px]
,对于问题 2,因为自己后面写了一个工具,处理起来也是比较快捷的。
我们大仓的6个项目都已经从 css modules 转成 tailwind css 了,其中3个是我操作的,但整体已经是流水线的方式了,所以切换成 tailwind css 过程还是很简单的,我大概分享下自己切换 tailwind css 的过程
请一定要安装 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ssr=false#overview这个 vscode 插件,它会读取你的 tailwind css 的配置,代码提示和查看样式规则上能带来很大的帮助:
https://tailwindcss.com/docs/installation 官方文档介绍的非常详细了,以 create-react-app 为例:
第一步,安装 tailwind,生成相对应的配置文件:
npm install -D tailwindcss
// yarn add tailwindcss -D
npx tailwindcss init
文件变化,主要是生成一份配置文件:
关于配置的说明可以直接看官方的文档 https://tailwindcss.com/docs/configuration#content,对于我们这种从 css modules 切换 tailwind css 的项目,有些配置需要着重关注一下:
important
, 它可以是 boolean
类型或者 string
类型,默认是 false
,对于新项目我们一般直接设置成 true
,设置成 true
,对于样式规则,会加上 !important
把级别提到最大,如果是字符串,就相当于一个选择符,如果设成 important: '#app'
,那么对应的 tailwind class 会变成 #app .tailwind-class: { /** */ }
这种形式。
content
就是文件匹配规则一般就是设置成 ['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}']
的形式。
corePlugins
,可以选择对 tailwind 的核心插件配置禁用的规则,对于我们这种项目来说,css normalize 一般是已经做好了的,所以一定要把它的 preflight
插件禁掉,不然会出现一些样式问题
corePlugins: {
preflight: false,
},
theme
,主题这个配置也是非常重要,你可以做些自定义的 class,这个后面会说,但一般来说,还是需要改下它的 font-size
,这样会让我们后面书写字体大小的时候舒服很多,因为 tailwind css 的字体大小是大小和行高组合起来的,这个一般都接受不了:
你需要加上这个配置,排除掉行高的影响:
theme: {
// fix tailwind line-height
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
},
},
整个的配置:
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
content: ['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}'],
corePlugins: {
preflight: false,
},
theme: {
extend: {
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
},
},
},
plugins: [],
};
在你的入口 css 文件里面加上,注意是 css 文件,别整到 css modules 文件里了:
@tailwind base;
@tailwind components;
@tailwind utilities;
.html {
font-size: 16px;
}
给 html 加上 font-size: 16px
主要是处理 tailwind css 的 rem 问题。
做完这些,就可以测试一下是否生效了,找一个页面,加上 <div className="flex"></div>
,执行 yarn start
试试是否生效:
当你看到这个就说明配置都生效了,这样就可以开心的写 tailwind css 了。
但是实际使用的时候,可能会碰到一些问题,比如这个长度没找到相对应的,这个颜色有没有,这个官方文档也详细说明了 https://tailwindcss.com/docs/adding-custom-styles。比如我有个 color: #666;
就是没有相对应的 tailwind class,只需要 text-[#666]
就好了,或者网页有个主题颜色,这个颜色在很多地方用到了,但是我不想一直 text-[xxx]
这样,只需要:
theme: {
extend: {
textColor: {
666: '#666',
},
backgroundColor: {
666: '#666',
},
},
},
就可以直接使用 text-666
和 bg-666
的形式了:
这一步是可选项,你可以使用 https://github.com/shiyangzhaoa/css-modules-to-tailwind 来对老代码进行转换,尝试执行(执行前记得提交代码,这个命令会直接修改你的代码):
npx css-modules-to-tailwind src/**/*.tsx -f
// npx css-modules-to-tailwind src/**/*.jsx -f
对于我的测试项目,可以看到有 48 文件得到修改:
查看文件变化,对于 css modules 文件:
对于 tsx/jsx 文件:
启动项目查看变化:
样式没有变化,class 也转换成功了,完美(bushi
综上所述,接入 tailwind css 的成本非常低,对于我来说,使用起来也是非常流畅,尤其你稍微熟悉以后,开发起来速度也是嗖嗖的,强烈推荐~