tailwind的特色(在Bootstrap 和vanilla Css之间)
https://tailwindcss.com/docs/what-is-tailwind/
Rails6
six版本的Rails使用rails new xxx后会生成：
postcss.config.js
tailwind
安装tailwind
#使用yarn info tailwindcss查看版本
#当下一个版本发布后，会抓这个版本
yarn add tailwindcss@next
也可以在npmjs.com/package/tailwindcss查看具体信息。
最新版本1.0更新了很多功能。
https://github.com/tailwindcss/tailwindcss/releases/v1.0.0-beta.1
https://next.tailwindcss.com/docs/installation
2增加Tailwind 到你的CSS
根据文档，Rails6使用了postcss-import依赖包，所以当把组件引进你的额外添加的文件时使用：
//新建app/javascript/stylesheets文件夹，新建application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
然后在../pcaks/application.js内引用application.scss文件：
require("../stylesheets/application.scss")
注意在views/layouts/application.html.erb中添加pack标签：
//引入pack
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
3使用Tailwind处理你的CSS
因为使用webpack:https://next.tailwindcss.com/docs/installation#webpack
添加2行代码到postcss.config.js文件
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
完成设置，现在就可以使用tailwind的组件了