切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

你好,我是坚持分享干货的 EarlGrey,翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。

如果我的分享对你有帮助,请关注我,一起向上进击。

作者:SSSS

https://juejin.cn/post/7237425753612288055

关于 Tailwind css

现在再提 tailwind css 也不是什么比较新鲜的事情了,已经有很多介绍的文章了,到目前来说,应该有不少新项目开始尝试使用它来开发样式了。比如说,next.js 的 cli 已经用 tailwind css 替代 css modules 了:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

很早的时候其实就想接入 tailwind css 尝试了,原因无非就是那几样,原子化,design token,更主要的是终于不用再为 class 的命名去伤脑经了,但劝退我使用 tailwind css 的几个因素:

  1. 新的东西,又带来新的学习成本

  2. 感觉更适合新项目,我们的目前的项目使用的都是 css modules,引入进来以后,是不是只能新页面才能用,毕竟老页面一堆 css modules 文件不可能一点点去改,本来就不熟悉,改起来更费时间了

但后面还是还是接入了,接入以后发现上面的提到的劝退点还是不值一提的,对于问题1,实际使用的时候配合上 vscode 插件陈本还是比较低的,而且 tailwind css 的 命名还是有一定规律的,比如宽度,基本上就是 w-[value/4px],对于问题 2,因为自己后面写了一个工具,处理起来也是比较快捷的。

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

我们大仓的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 的配置,代码提示和查看样式规则上能带来很大的帮助:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

安装

https://tailwindcss.com/docs/installation 官方文档介绍的非常详细了,以 create-react-app 为例:

第一步,安装 tailwind,生成相对应的配置文件:

npm install -D tailwindcss
// yarn add tailwindcss -D
npx tailwindcss init

文件变化,主要是生成一份配置文件:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

配置

关于配置的说明可以直接看官方的文档 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 的字体大小是大小和行高组合起来的,这个一般都接受不了:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

你需要加上这个配置,排除掉行高的影响:

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,真香!(tailwind css bootstrap)

当你看到这个就说明配置都生效了,这样就可以开心的写 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-666bg-666的形式了:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

处理老代码(针对 JSX/TSX 文件,可选项)

这一步是可选项,你可以使用 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 文件得到修改:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

查看文件变化,对于 css modules 文件:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

对于 tsx/jsx 文件:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

启动项目查看变化:

切换到了 Tailwind CSS,真香!(tailwind css bootstrap)

样式没有变化,class 也转换成功了,完美(bushi

总结

综上所述,接入 tailwind css 的成本非常低,对于我来说,使用起来也是非常流畅,尤其你稍微熟悉以后,开发起来速度也是嗖嗖的,强烈推荐~

EOF

Tailwind CSS 的开发团队在开源版的基础上,设计了官方的组件库,包含有 500 多个精心设计的组件和 10 套网页模板。官网单独购买的话,要快 300 美金,折合接近 2500 块。

但是如果大家一起共享的话,只需要不到 50 块就可以享受同官网版本相同的服务了。有兴趣的小伙伴可以前往淘宝详情页了解。

推荐阅读 点击标题可跳转

1、Python 项目工程化最佳实践

2、Python 可以比 C 还要快!

3、streamlit,一个超强的 Python 库

4、豆瓣8.9分的C 经典之作,免费送!

5、Python 3.12 版本有什么变化?

回复关键词「 pybook03」,领取进击的Grey与小伙伴一起翻译的《Think Python 2e》电子版

回复关键词「书单02」,领取进击的Grey整理的 10 本 Python 入门书的电子版

告诉你更多细节干货

欢迎围观我的朋友圈

👆每天更新所想所悟

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月16日 下午5:10
下一篇 2024年5月16日 下午5:22

相关推荐

  • 备孕科普文(备孕科普小知识)

    孔莹 中医副主任医师、中国中医药学会会员、广东省中医药学会优生优育专业委员会委员。 专家介绍: 1984年毕业于广州大学中医临床专业,从医近40年,具有扎实的中医理论及丰富的临床实…

    2022年6月26日
    302
  • 兰州牧药所试验基地建设项目开工

        7月10日,中国农业科学院兰州畜牧与兽药研究所试验基地建设项目开工仪式在甘肃省张掖综合试验基地举行。中国农科院副院长李金祥、成果转化局局长袁龙江、基建建…

    科研百科 2022年5月16日
    368
  • 武科大聂子淳

    武科大聂子淳: 一个追求梦想的年轻人 聂子淳,男,1993年6月出生于中国湖北省武汉市,毕业于武科大。他是一位充满热情和梦想的年轻人,追求着成为一名优秀的科学家和工程师。 在武科大…

    科研百科 2024年10月17日
    2
  • 农商行如何创建“星级支部”?干货来了→(农商银行有党支部吗)

    导 读 农商行如何加强党建引领、在创建“星级支部”上做精做细,引领各项业务步入稳健发展的快车道? 山西灵石农商银行运用“四招法”开展支部“创星”工作:统筹谋划,绘好创“星”全景图;…

    科研百科 2023年1月12日
    245
  • 国家课题 单位自筹资金的用途

    国家课题单位自筹资金的用途 国家课题单位自筹资金是指由课题单位自行筹集的资金,用于支持国家课题的研究和实施。这种资金通常由课题单位自行管理,并按照国家有关部门的规定进行使用。 国家…

    科研百科 2024年11月16日
    0
  • 推荐一个官方影视平台的第三方App支持TV端+pad端

    软件简介 哔哩哔哩tv版是第一个电视端第三方版,各方面还行,很多人一直在使用,可惜后来停止更新,而且打开只能有360p的画质。于是有了第二个三方版-BV,可以完美观看动态视频,但是…

    科研百科 2023年3月16日
    371
  • 客户关系管理客户忠诚度

    客户关系管理客户忠诚度 随着市场经济的不断发展,企业竞争日益激烈,客户忠诚度成为了许多企业成功的关键。客户关系管理(CRM)系统则是提高客户忠诚度的一种有效方法。本文将介绍客户关系…

    科研百科 2024年8月27日
    35
  • pmp与信息系统项目管理师哪个好

    PMP与信息系统项目管理师哪个好? 近年来,随着信息技术的不断发展和普及,信息系统项目管理师 (IPMP) 逐渐成为项目管理领域的一个热门职业。而与之相比,传统的项目经理 (PMP…

    科研百科 2025年1月24日
    2
  • 心理学专业 进科研所做什么

    心理学专业进科研所做什么 随着科技的发展,心理学专业也在不断地进步和发展。心理学专业的人如果想进入科研所,他们可以做什么?本文将介绍心理学专业进入科研所的一些常见职位和工作内容。 …

    科研百科 2024年10月14日
    3
  • 下列有关db承包模式说法正确的是

    数据库承包模式是一种常用的数据库架构设计模式,它允许多个客户或用户共同拥有和使用同一台数据库服务器上的数据库。在这种模式下,每个客户或用户都可以独立地对数据库进行访问和操作,从而实…

    科研百科 2024年9月30日
    22