HTML/CSS 成年人全都要, 如何共用 Bootstrap 与 Tailwind CSS

jicheng1014 · 2021年10月12日 · 最后由 ad583255925 回复于 2021年10月19日 · 808 次阅读

tailwindcss 作为最近流行的前端工具, 能让开发前端的效率健步如飞,

但是由于 tailwindcss 里几乎没有成套的组件, 所以从 0 开发比较吃力

说到成套的组件, 还是 bootstrap 强, 但是 bootstrap 就没有 tailwindcss 那么灵活

那么, 有没有一种方案, 能让这两种混用呢?

最近 tailwindcss lab 推出的视频

提供了一种思路:

类似 esbuild 的那种搞法, 就让 tailwindcss 独立运行, 最终生成独立的 css 文件, 之后再交给其他工具处理就好了

那么 如何折腾呢?

  1. webpack 不再直接处理 tailwind, 转而使用 tailwindcss 自行处理
npm install -D tailwindcss postcss    # 注意  是 -D, 以开发模式安装   这样就可以避开 webpacker 里  postcss7 的坑
  1. 修改 tailwind.config
module.exports = {
  mode: 'jit',
  purge: ['./app/**/*.html.erb', './app/**/*.html.haml', './app/helpers/**/*.rb', './app/**/**/*.js',],
  darkMode: false, // or 'media' or 'class'
  corePlugins: {
    preflight: false,
  },
  prefix: 'tw-',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这里有两个重点, 第一个重点: corePlugins 里 关闭了 预设 preflight, 因为每家都有自己的 normalize, 因为是以 bootstrap 为基础, 所以关闭 tailwind 的预设。 第二个重点是 prefix, 这样就将 所有 tailwinds 的 class 加了个前缀 "tw-" 如 原来 container 就变为了 tw-container 这样就可以避免跟 bootstrap 产生冲突

plus, 这里需要采用 jit 模式运行, 所以需要有 java 环境

  1. 在命令行里执行 npx tailwindcss --output app/assets/stylesheets/tailwind.css --watch

这样, 就可以自动生成你使用的 tailwind.css 文件了

接着, 你就可以用 assets 那一套来处理这个 css 文件了

部署的时候有两种选择, 一种是 开发的时候就把这个 tailwind.css 写进版本库中,就当成是自己写的文件就好 或者是 忽略这个文件, 但是在 precompile 之前 先运行 npx tailwindcss --output app/assets/stylesheets/tailwind.css 生成干净的文件即可

一个 repo 里引入两个库想想就头疼,建议直接买 tailwindui 的授权

v2up 回复

主要是老项目 又想用 tailwindcss 的 就很适合这种搞法(比如 homeland)

https://tachyons.io/gallery/ 用 tachyons 要什么效果 直接选,然后 ctrl+c ctrl+v 搞定 webpacker 都省了

tablecell 回复

看起来不错

其实我很想把 Homeland 的 Bootstrap 去掉,换成 Tailwind CSS

我也很想用 React + TypeScript 来改造前端

就是太费时间了,产出意义不是太大,干不动。

huacnlee 回复

我是觉得混用就挺好的

目前 homeland 感觉能上 react 的地方不多

倒是可以把 turbolinks 切换成 turbo , 可玩性就高一些了

huacnlee 回复

其实我很想把 Homeland 的 Bootstrap 去掉,换成 Tailwind CSS

我正在尝试中

用 tailwind 一年多, 发现路有点歪了。因为简单灵活,不知不觉的 html 文件里面一堆的类名。想着之后用@apply重构复用,可是从来没有行动过。

zhongsheng 回复

tailwind 是你改动的时候比较方便, 想到啥效果, 直接敲出来就好了, 传统的搞法 开发的时候要绕一下, 还得去改 css 文件, 中间转一道很麻烦

另外在传统方式中 class 取名的时候也面临一个困境 到底是 功能性的取名(类似 user-profile)还是表现形式的取名(类似 card), tailwindcss 就直接统一了这个搞法 全都按表现形式来

推荐看一下 refactoring ui 这本书,好像就是 tailwindcss 作者写的, 里面一些理念我觉得还挺对的

kikyous 回复

这个是解决 tailwindcss purge 速度的问题的么? tailwindcss 2.1 以后可以跑 jit(就是本文推荐的方式), 直接生成已经使用的 class 的 css 文件, 速度就几百毫秒 作者说 tailwindcss3 会把 jit 模式设置成默认

jicheng1014 回复

tailwind 就是一个 class 规则而已,windicss 是开源社区按这个规则的重新实现。现在的主要维护者是 vue 社区的一个大佬。

https://github.com/windicss/windicss/discussions/176#discussioncomment-506195

jicheng1014 回复

你说的这本书是要$99 订阅的那个吗?

ffw 回复

说的没错 就是它

如果你们是有 UI 设计师存在的正规团队,强烈不推荐 Tailwind

需要 登录 后方可回复, 如果你还没有账号请 注册新账号