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的组件了
案例git:https://github.com/chentianwei411/tailwindapp