Rails幼幼班--Rails安装Tailwindcss

用gem跟CDN不好吗...

这麽简单的事情也要分享??

因为,没常安装就忘东忘西了...

认命做一篇笔记...

快速设定,预设模式全开,如需客制,请再至官网查询。

Rails 6.1.4.1
ruby 2.7.3

$ rails new project_name
#完成後至专案底下
$ rails webpacker:install
#完成後
$ yarn add tailwindcss  #就习惯用yarn
#完成後
$ yarn tailwindcss init --full

Project专案会多一个档案project/tailwind.config.js
内容:https://unpkg.com/browse/[email protected]/stubs/defaultConfig.stub.js
这是第一段,安装了什麽,原理,等会用了再说-0-"

接着设定引用。

於app/javascript新增一资料夹,命名stylesheets,不一定要命名这个,故意与Rails原生的asset pipeline相同而已。
将刚刚产生的tailwind.config.js,移入此资料匣。

同资料夹再增新一个档案,命名application.scss,不一定要命名这个,故意与Rails原生的asset pipeline相同而已。里面输入以下资讯。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

接着到专案底下有个postcss.config.js档案,内容预设如下

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

修改後
module.exports = {
  plugins: [
    require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
#更改为环境变数再套用等,超过幼幼班了...
#另外故意采用完整写法,网路上有许多比较简写的文章。

接着到app/views/layouts/application.html.erb,增加一段code。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- 新增下面这行 -->
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- 新增上面那行 -->
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

最後到app/javascript/packs/application.js 加入

import "stylesheets/application"

安装Tailwinds到这边,接着测试。

测试

指令快速建立

$ rails g controller tailwind index

进routes.rb改一下内容

Rails.application.routes.draw do
  root 'tailwind#index'
end

接着启动Rails s
如果看到以下画面

代表载入失败,<"h1">还是一样是大字。

关掉服务器,请先依序於专案下操作这两个指令。

$ npm uninstall tailwindcss postcss autoprefixer
$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

接着开启Rails s,如以下画面,html都已经经过reset。(我的示范画面调整过Margin了。)

代表成功了

如果无法排除,那可能就是档案名之类的错误...
(打错字....万一是我打错字怎麽办...)

修改app/views/tailwind/index.html.erb

<h1 class="m-8 text-6xl text-red-900">Tailwind#index</h1>
<p class="font-bold text-green-800">Find me in app/views/tailwind/index.html.erb</p>

重整服务器後,如果有看到字体变化代表完成。

好东西连结。
使用Foreman:龙哥--如何在 Rails 使用 Webpacker（上）