使用 Tailwind 作為無類別 CSS 框架的快速 Ruby on Rails 前端

本文與本系列之前的文章非常相似，但這次我們將使用Tailwind框架作為無類CSS框架。

創建新的Rails應用

• rails serve 指令前的 time 用來顯示指令執行的總時間。以下範例耗時47秒。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8 基於其「No Build」理念，預設使用Propshaft作為資源管道庫和Importmap作為JavaScript庫。 Importmap不執行任何JavaScript處理。

使用VSCode或您喜歡的編輯器開啟專案

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

了解Rails預設版面配置 app/views/layouts/application.html.erb

展開…

- 遵循約定優於配置（CoC）原則，Rails使用`application.html.erb`作為預設佈局來渲染所有頁面； - Rails 8中的原始文件內容應與以下內容相同或相似：

<code>$ cd classless-css-tailwind && code .</code>

• 標籤內包含頁面渲染和正常運作的重要結構元素。 用於包含元資料和重要資源，這些資源有助於配置頁面的行為（使用JavaScript）、外觀（使用CSS）、與其他系統和服務的關聯以及安全性設置，例如CSRF和CSP保護；
• 頁面的主要內容將透過ERB標籤在內渲染。此標籤作為整合點，用於包含Rails動態渲染的視圖內容；

使用pages控制器和html_test_1、html_test_2、html_test_3和html_test_4操作產生測試頁

展開…

『`bash $ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 create app/controllers/pages_controller.rb route get "pages/html_test_1" get "pages/html_test_2" get "pages/html_test_3" get "pages/html_test_4" invoke erb create app/views/pages create app/views/pages/html_test_1.html.erb create app/views/pages/html_test_2.html.erb create app/views/pages/html_test_3.html.erb create app/views/pages/html_test_4.html.erb invoke helper create app/helpers/pages_helper.rb ```

• 由於在建立控制器和操作時也添加了路由，因此可以透過以下連結存取任何已建立的操作：
• localhost:3000/pages/html_test_1
• localhost:3000/pages/html_test_2
• localhost:3000/pages/html_test_3
• localhost:3000/pages/html_test_4

使用VSCode開啟config/routes.rb檔案

• 在文件末尾添加以下行，將頁面根目錄定向到先前創建的pages控制器和html_test_1操作。這樣，造訪您的網站或系統時，首先顯示的頁面將是pages控制器的html_test_1頁面。否則，將顯示Rails的預設頁面。

    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link>

• 如果在建立控制器時傳遞了--skip-routes參數，則可以忽略為建立的操作新增路由。完整的命令將變成rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

顯示Rails路由

展開…

使用終端，您可以指定控制器（使用`-c`）來顯示路由，例如`pages`控制器：

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

或者，您可以使用以下命令顯示所有路由：

<code>$ cd classless-css-tailwind && code .</code>

• 您也可以使用位址http://127.0.0.1:3000/rails/info/routes透過瀏覽器存取路由。請勿忘記使用專案根目錄中的bin/dev或標準rails server啟動開發伺服器。開發伺服器會「監聽」JavaScript檔案和CSS檔案的更改，以執行必要的處理以將其提供給使用者。
• 為了讓這些檔案的變更能夠立即在瀏覽器中執行和查看，需要安裝像Rails Live Reload這樣的gem。

我們將建立四個包含HTML內容的頁面來測試CSS樣式。

Ruby on Rails預設使用MVC（模型-視圖-控制器）架構來啟動專案的組織。大部分程式碼都組織在以下資料夾中：

• 與領域/業務邏輯和資料相關的程式碼應保存在app/models資料夾中；
• 與顯示相關的程式碼（HTML、JSON、XML等）將位於app/views資料夾中；
• 與請求生命週期相關的程式碼將位於app/controllers資料夾中；

插入html_test_1頁面的內容

展開…

- 訪問連結https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html並複製`

`標籤內的所有內容，如下圖所示

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

插入html_test_2頁面的內容

展開…

- 訪問連結https://gist.github.com/tommaitland/5865229並複製`

`標籤內的所有內容，如下所示

<code>$ cd classless-css-tailwind && code .</code>

A Sample Form Legend

Name: Email: Button: Single Checkbox:

Single Checkbox:

of Checkboxes: Checkbox 1: Checkbox 2: Checkbox 3:

Checkbox 4: Color: Color: Date:🎜 > Date, Time (Local): File: Image: Month: Number:

Password:

Singleingle>Singleal> 🎜>Group of Radios: Radio 1: Radio 2: Radio 3:

Radio 4: Range>Radio 4: Range: Reset: Time: Search: Tel: Text: URL: Week: This is a butee! Select 1: TestTestSelect 2: TestTestSelect Multiple: TestTestSelect Groups: TestTestTestTest

- 開啟`app/views/pages/html_test_2.html.erb`檔案並貼上上面複製的內容

插入

頁面的內容

html_test_3

展開…

訪問連結https://github.com/cbracco/html5-test-page/blob/master/index.html並複製`

`標籤後的所有內容，其中包含文字`

`

以上是使用 Tailwind 作為無類別 CSS 框架的快速 Ruby on Rails 前端的詳細內容。更多資訊請關注PHP中文網其他相關文章！