Next.js 15 Fullstack Web Apps · Pelajaran

Mengintegrasikan Tailwind CSS

Siapkan dan manfaatkan Tailwind CSS untuk pengembangan antarmuka pengguna yang cepat dengan kelas yang mengutamakan utilitas.

Mengintegrasikan Tailwind CSS adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengintegrasikan Tailwind CSS” gratis?

Ya — teks lengkap “Mengintegrasikan Tailwind CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengintegrasikan Tailwind CSS”?

Siapkan dan manfaatkan Tailwind CSS untuk pengembangan antarmuka pengguna yang cepat dengan kelas yang mengutamakan utilitas. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Mengintegrasikan Tailwind CSS” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack Web Apps