使用 Ruby on Rails 安裝 Tailwind CSS

在 Ruby on Rails v7+ 專案中設定 Tailwind CSS。

如果尚未設定專案，請先建立一個新的 Rails 專案。最常見的方法是使用 Rails 命令列。

終端機

rails new my-projectcd my-project

安裝 tailwindcss-ruby 和 tailwindcss-rails gems，然後執行安裝命令以在您的專案中設定 Tailwind CSS。

終端機

./bin/bundle add tailwindcss-ruby -v 4.0.0.beta.9./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

在位於 ./app/assets/stylesheets 目錄中的 application.tailwind.css 檔案中新增匯入 Tailwind CSS 的 @import。

application.tailwind.css

@import "tailwindcss";

使用 ./bin/dev 執行您的建置流程。

終端機

./bin/dev

開始使用 Tailwind 的實用類別來設定內容樣式。

index.html.erb

<h1 class="text-3xl font-bold underline">  Hello world!</h1>