📚

tailwindについて

に公開
Tailwind CSS
tech

開発環境

  • macOS
  • Rails 7.1.3.3
  • ruby-3.2.3

行いたいこと

  • 既存のプロジェクトにTailwindv4を追加した流れ。


既存のプロジェクトにTailwindv4を追加する

  1. Gemfile に以下を追加
gem "cssbundling-rails"
  1. インストール
$ bundle install
  1. Tailwind をセットアップ
$ bin/rails css:install:tailwind

これでapplication.tailwind.cssが自動生成される。

app/assets/stylesheets/
  ├─ application.css
  ├─ application.tailwind.css ← これが生成される

あとは layout ファイル（例：app/views/layouts/application.html.erb）に以下を追記する。

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>


Tailwind v4 の書き方

app/assets/stylesheets/application.tailwind.css
@import "tailwindcss";

・この1行で、base・components・utilitiesがすべて読み込まれる

Tailwind v3 の場合
app/assets/stylesheets/application.tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Tailwind v4 の主な変更点
  • PostCSS プラグインが不要になった
  • @import "tailwindcss"; 1行でセットアップ完了
  • tailwind.config.js が任意に（デフォルト構成が組み込み）
  • パフォーマンス向上（ビルドがより高速に）
  • 新しいカラーシステム（OKLCH 色空間対応）
v3 → v4 で変わった箇所
項目 v3 v4
インポート方法 base/components/utilities を分割 @import "tailwindcss"; 1行
tailwind.config.js 必須（未設定ではエラー） 任意（なくても動く）
PostCSS 必須 不要
Autoprefixer 必須 LightningCSS 内蔵
カラーシステム RGB中心 OKLCHベース（色管理が正確）
ビルドエンジン PostCSS LightningCSS（高速）


設定ファイル（任意）

v4ではtailwind.config.jsは必須ではないが、カスタムカラーやフォントを使いたい場合は以下のように設定する。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1da1f2',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}


よく使うユーティリティクラス

分類 クラス例 説明
レイアウト flex, grid, justify-center, items-center 要素の配置
余白 p-4, m-2, space-y-4 内外余白の調整
色 bg-gray-100, text-blue-500 背景色・文字色
フォント font-bold, text-xl, leading-relaxed 文字の装飾
境界線・角丸 border, rounded-lg, shadow-md 枠線や角の丸み
効果 hover:opacity-80, transition, duration-200 アニメーションや動き


Tailwind CLI の使い方（v4新仕様）

  • Tailwind v4 では内部でLightning CSSを利用するようになり、従来のPostCSSやAutoprefixerの設定が不要になった。

・Tailwindを単体で使いたい場合や、カスタマイズしたい場合は次のコマンドを使用する。

npx @tailwindcss/cli -i ./input.css -o ./output.css --watch

Railsではcssbundling-railsがこの設定を自動的に扱ってくれる。




以上です。

GitHubで編集を提案

Discussion