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