PR

Rails7プロジェクトでTailwindを使い新規作成する方法

記事内に広告が含まれています。

Tailwindを使って見たく色々と触る環境がほしいと思ったのでRailsプロジェクトで使ってみます。

備考録を兼ねてます。

Tailwindとは?

Tailwind CSSとは、ユーティリティファーストという考え方に基づいたCSSフレームワークです。

ユーティリティファーストとは、CSSを書かずに、Tailwind CSSが用意したクラスをHTMLに適用することで、柔軟にスタイリングする方法です。

つまり、自分でCSSをゴリゴリ書かずTailwingを使っていけばいい見栄えのWebサイトが作れるということです。

Tailwind CSSのメリットは、以下のようなものがあります。

  • クラス名を考える必要がない
  • CSSファイルが増えすぎない
  • 安全に変更できる
  • レスポンシブやホバーなどの状態に対応できる
  • デザインシステムの構築がしやすい

実行環境

Ubuntu 22.04.3 LTS

Ruby on Rails 7.1.2

Ruby 3.2.2

プロジェクト立ち上げ

railsサーバー立ち上げまで

コマンド類を書いていきます。

実行していってください。

bundle init
# railsのコメントアウトを外す
bundle install --path vendor/bundle
# データベースをお好みで
# --cssオプションでtailwildと指定する
bundle exec rails new . --database=postgresql --css=tailwind
bundle exec rails db:create

上記でrails sでサーバーを立ち上げうまくいってるか試してみましょう。

railsサーバー立ち上げ
railsサーバー立ち上げ

上記画像が表示されればOKです。

Tailwind使えるようになるまで

railsコードを書くのがめんどくさいのでscaffold機能を使ってコードやファイルを自動生成していきます。

bundle exec rails g scaffold User name:string email:string
bundle exec rails db:migrate

次にデータベースにデータを投入していきます。

db/seed.rbに以下のコードを書きます。

10.times do |n|
User.create!(
name: "user_name_#{n + 1}",
email: "mail_#{n + 1}@example.com"
)
end

以下のコマンドを実行します。

bundle exec rails db:seed

最後にTailwindをインストールします。

bundle exec rails tailwindcss:install

確認

http://127.0.1:3000/usersにアクセスしTailwindが適応しているか確認しましょう。

tailwind適応画像
tailwind適応画像

画像のようになっていればOKです。

Tailwindを色々触ってみる

/app/views/index.html.erbや/app/views/_user.html.erbなどを見てみるとTailwindが記述されているのがわかります。

/app/vies/index.html/erbの<h1>に書かれているUsersという文字を赤くしてみます。

<h1>タグのクラスに「text-red-600」を追記します。

<h1 class="font-bold text-4xl text-red-600">Users</h1>

Tailwindをビルドします。

bundle exec rails tailwindcss:build

ブラウザを見てましょう。

文字を赤くする
文字を赤くする

「Users」という文字が赤くなればOKです。

最後に

Tailwindはすごく簡単にCSSを操作できました。

公式チートシートもあるのでそれを参考にすれば楽に見栄えのいいWebサイトを作れそうです。

色々触って覚えていきましょう。

コメント

タイトルとURLをコピーしました