Summary  
This chapter covers using a utility-first CSS framework that provides low-level classes applied directly in markup to style elements without writing custom CSS.

General domain of usage  
Front-end web development

Tailwind CSSは、低レベルのユーティリティクラスを集めたCSSフレームワークです。これらのクラスは、マークアップに直接追加することで、CSSコードを一から書くことなくデザインを作成できます。Tailwindの主な考え方は、適切なクラスを追加するだけで、要素に必要なスタイルを適用できる点にあります。

### 例:
```html
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
```
このbutton要素は、緑色の背景と白色のテキストを持ちます。また、パディングと角丸も適用されます。

## プロジェクトに戻る
Tailwindのスタイリングを使って、アプリにもう一つ要素を追加。下記の`div`要素をコピーし、`p`ファイルの`app/page.tsx`要素の上に貼り付け。

変更を保存し、ライブページを確認。白い円形が表示されていることを確認。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

Tailwind CSSを使用したスタイリング

例:

プロジェクトに戻る

実践例