Next.js 15 Fullstack Web Apps · レッスン

Tailwind CSSの統合

ユーティリティファーストのクラスを使った迅速なUI開発のために、Tailwind CSSをセットアップして活用します。

「Tailwind CSSの統合」はCoddyKit上の無料Next.js 15 Fullstack Web Appsレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack Web Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Meet Tailwind CSS

Welcome to styling with Tailwind CSS! It's a popular utility-first CSS framework that helps you build custom designs quickly.

Instead of writing custom CSS for every element, you apply pre-defined utility classes directly in your HTML or JSX.

Utility-First Explained

What does 'utility-first' mean?

Small, Single-Purpose Classes: Each class does one thing, like text-blue-500 for text color or p-4 for padding.
Build Complex UIs: You combine many small utility classes to create unique designs.
No Custom CSS Needed: Often, you won't need to write any custom CSS files, speeding up development.

Tailwind & Next.js: A Perfect Match

Tailwind CSS pairs wonderfully with Next.js:

Component-Based: Easily apply classes directly to your React components.
Zero Runtime: Tailwind generates static CSS at build time, meaning no extra JavaScript is shipped to the browser for styling.
Purging: It automatically removes unused CSS, keeping your final bundle size small.

Step 1: Install Core Dependencies

First, let's add Tailwind CSS and its peer dependencies to your Next.js project. We install them as development dependencies.

tailwindcss: The core framework.
postcss: A tool for transforming CSS.
autoprefixer: A PostCSS plugin to add vendor prefixes to CSS rules.

npm install -D tailwindcss postcss autoprefixer

Step 2: Initialize Tailwind Config

Next, generate your Tailwind configuration files. The -p flag creates both tailwind.config.js and postcss.config.js for you.

npx tailwindcss init -p

Step 3: Configure Content Paths

Open tailwind.config.js. You need to tell Tailwind where to find your files (like pages, components) that will use Tailwind classes. This allows it to scan and generate only the necessary CSS.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Add Tailwind Directives to CSS

Now, open your global CSS file (usually ./app/globals.css in the App Router). Add the @tailwind directives at the top. These inject Tailwind's base styles, components, and utility classes into your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles can go here */

Using Utility Classes in JSX

With Tailwind set up, you can start applying classes directly to your elements. Notice how multiple classes combine to style the h1 element in this example.

// app/page.js or a component file

export default function HomePage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-indigo-600 p-6 rounded-lg shadow-md bg-white">
        Hello Tailwind!
      </h1>
    </div>
  );
}

Responsive Design Made Easy

Tailwind uses a mobile-first approach for responsive design. You can apply different styles at various breakpoints using prefixes like sm:, md:, and lg:.

p-4: Default padding (small screens).
md:p-8: Padding for medium screens and up.
lg:p-12: Padding for large screens and up.

// app/page.js or a component file

export default function ResponsivePage() {
  return (
    <div className="p-4 md:p-8 lg:p-12 bg-blue-100 md:bg-green-100 lg:bg-purple-100">
      <p className="text-base md:text-lg lg:text-xl font-medium">
        Watch me change on different screen sizes!
      </p>
    </div>
  );
}

Tailwind Integration Check

You've learned the essential steps to integrate Tailwind CSS into your Next.js project. Let's test your understanding!

Recap: Styling with Tailwind

Congratulations! You've successfully learned how to integrate Tailwind CSS into your Next.js application.

Installation: Added Tailwind and PostCSS dependencies.
Configuration: Initialized and configured tailwind.config.js to scan your files.
Integration: Included Tailwind's base styles in your global CSS.
Usage: Started styling components with utility classes and understood responsive design.

Tailwind CSS empowers you to build beautiful, responsive UIs rapidly with a consistent design system.

よくある質問

「Tailwind CSSの統合」レッスンは無料ですか？

はい。「Tailwind CSSの統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack Web Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

「Tailwind CSSの統合」で何を学びますか？

ユーティリティファーストのクラスを使った迅速なUI開発のために、Tailwind CSSをセットアップして活用します。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack Web Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack Web Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack Web Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Tailwind CSSの統合」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack Web Appsレッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack Web Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack Web Appsに戻る