Rails6使用tailwind CSS

 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