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 生成干净的文件即可