Tailwind CSS di React dan Next.js: Panduan Pengaturan Lengkap – Beragampengetahuan

Panduan komprehensif ini memandu Anda dalam menyiapkan Tailwind CSS versi 3 dan 4 di proyek React dan Next.js, yang mencakup langkah-langkah instalasi, konfigurasi, mode komponen, penerapan mode gelap, praktik terbaik, dan skenario pemecahan masalah umum.

Jika akhir-akhir ini Anda sedang membuat aplikasi web, Anda mungkin pernah mendengar tentang Tailwind CSS. Ini mengubah cara banyak dari kita bergaya dengan membiarkan kita menggunakan kelas utilitas untuk membuat desain langsung di markup. Tidak perlu lagi berpindah-pindah antara file HTML dan CSS, atau berurusan dengan konvensi penamaan yang pasti akan rusak seiring pertumbuhan proyek Anda.

Panduan ini mencakup penyiapan Tailwind CSS di proyek React dan Next.js, mencakup versi 3 (masih banyak digunakan dalam produksi) dan versi 4 (versi terbaru dengan peningkatan besar). Kami juga akan mengatasi pengaturan mode gelap yang terkadang membingungkan yang bahkan dapat ditemui oleh pengembang berpengalaman.

Pahami filosofi Tailwind

Sebelum kita mendalami penyiapannya, penting untuk memahami perbedaan Tailwind. Daripada menulis CSS khusus untuk setiap komponen, Anda menerapkan kelas utilitas yang sudah dibuat sebelumnya langsung ke elemen Anda.

Anggap saja sebagai perangkat besar di mana setiap kelas melakukan hal tertentu dengan baik. Ingin isian? Tambahkan ke p-4. Perlu responsif? mewujudkannya md:p-8. Jika Anda menggunakan CSS tradisional, pendekatan ini akan terasa aneh pada awalnya, tetapi setelah berhasil, Anda akan mendapati diri Anda membangun antarmuka dengan sangat cepat.

Keajaiban terjadi selama pembuatan ketika Tailwind memindai file Anda dan hanya berisi gaya yang benar-benar Anda gunakan. Ini berarti meskipun ribuan utilitas tersedia, paket CSS akhir Anda tetap ramping.

Siapkan Tailwind CSS v3 di React menggunakan Vite

Mari kita mulai dengan versi 3 dari proyek React kita menggunakan Vite. Versi 3 masih sangat populer, terutama pada basis kode yang sudah ada, dan memahami pengaturannya dapat membantu mempertahankan proyek lama.

Pertama, gunakan Vite untuk membangun proyek React Anda:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app

Sekarang instal Tailwind dan dependensi sejenisnya. Dependensi rekan ini (PostCSS dan Autoprefixer) menangani alur transformasi CSS yang diandalkan oleh Tailwind:

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Itu init -p perintah membuat dua file konfigurasi. ini -p flag menghasilkan konfigurasi PostCSS khusus dengan konfigurasi Tailwind, sehingga menyimpan langkah-langkah manual.

Buka yang dihasilkan tailwind.config.js Dan beri tahu Tailwind di mana menemukan kelas dalam proyek tersebut:

/** @type import('tailwindcss').Config */
export default 
  content: [
    "./index.html",
    "./src/**/*.js,ts,jsx,tsx",
  ],
  theme: 
    extend: 
      // Your custom design tokens go here
    ,
  ,
  plugins: [],

ini content Array sangat penting. Ini memberi tahu Tailwind file mana yang harus dipindai untuk mencari nama kelas. Lewatkan satu jalur di sini dan Anda akan bertanya-tanya mengapa gaya Anda tidak berfungsi.

Selanjutnya, ganti isinya src/index.css Menurut instruksi Tailwind:

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

Perintah ini memasukkan gaya Tailwind ke dalam CSS Anda. Urutannya penting: gaya dasar memberikan nilai reset dan default, komponen untuk kelas komponen yang sudah dibuat sebelumnya, dan utilitas adalah kelas utilitas dasar Anda.

Terakhir, pastikan file CSS ini diimpor ke file src/main.tsx:

import './index.css'

berlari npm run dev Sekarang Anda dapat mulai menggunakan kelas Tailwind di komponen Anda!

Menyiapkan Tailwind CSS v4 di React

Versi 4 akan dirilis pada akhir tahun 2024 dan mewakili perubahan arsitektur besar. Apa perubahan terbesarnya? Sebagian besar kasus penggunaan tidak lagi bergantung pada PostCSS. Tailwind kini menyertakan mesin secepat kilat yang ditulis dalam Rust, membuat penyiapan lebih mudah dan pembuatan lebih cepat.

Mulailah dengan pengaturan Vite yang sama:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app

Instalasi v4 jauh lebih sederhana:

npm install tailwindcss @tailwindcss/vite

Anda akan menambahkan Tailwind langsung ke konfigurasi Vite, bukan konfigurasi PostCSS. memperbarui vite.config.ts:

import  defineConfig  from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig(
  plugins: [
    react(),
    tailwindcss(),
  ],
)

di dalam kamu src/index.csssintaksnya sedikit berubah:

@import "tailwindcss";

Itu saja! Versi 4 secara otomatis mendeteksi file konten Anda dan tidak memerlukan konfigurasi eksplisit. Mesin baru ini menangani semuanya secara internal, sehingga menghasilkan build yang lebih cepat dan hot reload.

Siapkan Tailwind CSS v3 di Next.js

Proyek Next.js memiliki pertimbangan tersendiri, terutama pengenalan App Router di versi 13. Mari kita lihat pengaturan Next.js v3:

npx create-next-app@latest my-next-app --typescript --app
cd my-next-app

Pasang tumpukan Tailwind:

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Konfigurasi tailwind.config.js Gunakan jalur spesifik Next.js:

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

Perhatikan bahwa kami menyertakan keduanya app Dan pages Daftar isi. Hal ini memastikan kompatibilitas baik Anda menggunakan App Router yang lebih baru atau Pages Router tradisional.

Tambahkan arahan Tailwind ke app/globals.css:

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

Pastikan file CSS ini diimpor ke tata letak root Anda (app/layout.tsx):

import './globals.css'

export default function RootLayout(
  children,
: 
  children: React.ReactNode
) 
  return (
    <html lang="en">
      <body>children</body>
    </html>
  )

Siapkan Tailwind CSS v4 di Next.js

Untuk versi 4 di Next.js, proses ini memanfaatkan PostCSS (digunakan secara internal oleh Next.js):

npx create-next-app@latest my-next-app --typescript --app
cd my-next-app

Instal v4 dan plugin PostCSS-nya:

npm install tailwindcss @tailwindcss/postcss

Buat sebuah postcss.config.mjs dokumen:

/** @type import('postcss-load-config').Config */
const config = 
  plugins: 
    "@tailwindcss/postcss": ,
  ,
;

export default config;

memperbarui app/globals.css:

@import "tailwindcss";

Pernyataan import dalam tata letak tetap tidak berubah. Kecerdasan versi 4 berarti ia akan secara otomatis mencari file konten Anda di proyek Next.js Anda.

Gunakan komponen

Setelah disiapkan, penggunaan Tailwind sama di semua versi. Berikut adalah komponen kartu berguna yang menunjukkan pola umum:

function Card( title, description, highlighted = false ) 
  return (
    <div className=`
      max-w-sm rounded-lg overflow-hidden shadow-lg p-6
      $highlighted ? 'bg-blue-50 border-2 border-blue-500' : 'bg-white'
      hover:shadow-xl transition-shadow duration-300
    `>
      <h2 className="font-bold text-xl mb-2 text-gray-900">
        title
      </h2>
      <p className="text-gray-700 text-base leading-relaxed">
        description
      </p>
    </div>
  );

Perhatikan bagaimana kita menggunakan literal templat untuk menangani gaya bersyarat. Mode ini membuat BEJ Anda tetap dapat dibaca sambil memanfaatkan utilitas Tailwind.

Terapkan mode gelap dengan benar

Mode gelap adalah hambatan bagi banyak pengembang. Metode untuk v3 dan v4 berbeda, dan dokumentasinya dapat membingungkan. Biarkan saya menguraikannya.

Mode gelap di Tailwind v3

Pertama, aktifkan mode gelap berbasis kategori di aplikasi Anda tailwind.config.js:

module.exports = 
  darkMode: 'class',  // This enables manual control
  // ... rest of your config

Sekarang buat komponen peralihan tema untuk mengelola kelas gelap pada elemen HTML:

// components/ThemeToggle.tsx
import  useEffect, useState  from 'react';

export function ThemeToggle() 
  const [theme, setTheme] = useState('light');

  useEffect(() => 
    // Check for saved preference or default to light
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    const initialTheme = savedTheme , []);

  const toggleTheme = () => 
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    
    // Update DOM
    if (newTheme === 'dark') 
      document.documentElement.classList.add('dark');
     else 
      document.documentElement.classList.remove('dark');
    
    
    // Save preference
    localStorage.setItem('theme', newTheme);
  ;

  return (
    <button
      onClick=toggleTheme
      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 
                 text-gray-900 dark:text-gray-100
                 hover:bg-gray-300 dark:hover:bg-gray-600
                 transition-colors"
      aria-label="Toggle theme"
    >
      theme === 'light' ? '🌙' : '☀️'
    </button>
  );

Untuk mencegah tema yang salah saat halaman dimuat, tambahkan skrip ini ke header dokumen. Di Next.js, buat komponen:

// app/ThemeScript.tsx
export function ThemeScript() 
  const themeScript = `
    (function() )();
  `;

  return (
    <script dangerouslySetInnerHTML= __html: themeScript  />
  );

Sertakan dalam tata letak root sebelum isi:

// app/layout.tsx
import  ThemeScript  from './ThemeScript';

export default function RootLayout( children ) 
  return (
    <html lang="en">
      <head>
        <ThemeScript />
      </head>
      <body>children</body>
    </html>
  );

Mode gelap di Tailwind v4

Versi 4 mengubah pendekatannya sedikit. Daripada mengonfigurasi opsi, Anda menentukan perilaku mode gelap menggunakan CSS. Tambahkan ini ke file CSS global setelah Tailwind mengimpor:

@import "tailwindcss";

/* Enable class-based dark mode */
@variant dark (&:where(.dark, .dark *));

Komponen peralihan tema tetap sama, tetapi mesin v4 menangani variasi dengan lebih efisien.

Untuk pendekatan yang lebih kompleks menggunakan properti khusus CSS (berfungsi di kedua versi):

@import "tailwindcss";

:root 
  --color-background: 255 255 255;  /* white */
  --color-text: 17 24 39;           /* gray-900 */
  --color-primary: 59 130 246;      /* blue-500 */


.dark 
  --color-background: 17 24 39;     /* gray-900 */
  --color-text: 243 244 246;        /* gray-100 */
  --color-primary: 96 165 250;      /* blue-400 */

Kemudian perluas konfigurasi Tailwind Anda untuk menggunakan variabel berikut:

module.exports = 
  theme: 
    extend: 
      colors: 
        background: 'rgb(var(--color-background) / <alpha-value>)',
        text: 'rgb(var(--color-text) / <alpha-value>)',
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
      ,
    ,
  ,

Sekarang Anda dapat menggunakan bg-background, text-textDan text-primary Kelas yang secara otomatis menyesuaikan dengan tema.

Praktik terbaik dari awal

Setelah bekerja dengan Tailwind di beberapa proyek, praktik berikut selalu terbukti bermanfaat:

Jaga konfigurasi Anda tetap ramping. Perluas tema hanya jika Anda perlu mempertahankan nilai khusus yang konsisten di seluruh proyek Anda. Misalnya, gaya satu kali dapat memiliki nilai apa pun bg-[#1da1f2].

Rangkullah pola komponen. Meskipun Tailwind mendorong kelas utilitas, jangan segan-segan membuat kelas komponen untuk pola yang benar-benar berulang. menggunakan @apply Petunjuk peringatan:

@layer components 
  .btn-primary 
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg 
           hover:bg-blue-600 transition-colors;
  

Gunakan plugin resmi Prettier. Memasang prettier-plugin-tailwindcss Secara otomatis mengurutkan kursus dalam urutan yang konsisten. Ini membuat peninjauan kode menjadi lebih mudah.

Manfaatkan IntelliSense. Ekstensi resmi VS Code menyediakan pelengkapan otomatis, pratinjau hover, dan linting. Ini berguna untuk mempelajari nama kelas dan menemukan kesalahan ejaan.

Pertimbangkan aksesibilitas. Tailwind dapat dengan mudah membuat antarmuka yang tidak dapat diakses jika Anda tidak berhati-hati. Selalu uji menggunakan navigasi keyboard dan pembaca layar. Gunakan atribut HTML semantik dan ARIA jika diperlukan.

Pemecahan Masalah FAQ

Jika gaya tidak berlaku, periksa ini secara berurutan:

1. Verifikasi bahwa jalur konten dalam konfigurasi cocok dengan struktur file sebenarnya
2. Pastikan Anda mengimpor file CSS di titik masuk aplikasi Anda
3. Periksa kesalahan ketik pada nama kelas (ekstensi IntelliSense membantu di sini)
4. Di v3, pastikan PostCSS dikonfigurasi dengan benar
5. Hapus cache build dan mulai ulang server pengembangan

Untuk build produksi yang terlihat rusak, Anda dapat membuat nama kelas secara dinamis. Tailwind tidak dapat mendeteksi hal ini. Selalu gunakan nama kelas lengkap atau masukkan ke dalam daftar aman dalam konfigurasi.

Sumber belajar yang mendalam

Dokumentasi resmi Tailwind CSS tetap menjadi sumber terbaik untuk mempelajari masing-masing utilitas dan opsi konfigurasi. Untuk panduan spesifik tentang Next.js, lihat dokumentasi gaya Next.js.

Perpustakaan Komponen UI Tailwind (berbayar) menampilkan pola profesional dan praktik terbaik. Bahkan jika Anda tidak membelinya, sampel gratis menunjukkan arsitektur komponen yang solid.

Untuk terus mengikuti perkembangan pengembangan v4, ikuti repositori Tailwind CSS GitHub dan blog resmi.

teruskan

Tailwind CSS secara mendasar telah mengubah cara banyak dari kita membangun antarmuka. Baik Anda memilih v3 stabil atau menerima penyempurnaan v4, Anda akan mendapatkan alat yang telah teruji dalam skala mulai dari prototipe hingga aplikasi produksi.

Kunci untuk menguasai Tailwind bukanlah dengan menghafal setiap kelas utilitas. Ia memahami model mental dari sebuah desain yang terdiri dari bagian-bagian kecil dan memiliki tujuan. Mulailah dengan dasar-dasarnya, lanjutkan ke fitur-fitur lanjutan seperti animasi dan variasi khusus, dan jangan ragu untuk melihat kode sumber dari situs yang Anda kagumi.

Ingat, Tailwind adalah alat, bukan agama. Gabungkan dengan metode lain jika masuk akal. Gunakan modul CSS untuk mengimplementasikan animasi yang kompleks. Tulis CSS khusus bila diperlukan. Sasaran kami adalah memberikan pengalaman pengguna yang luar biasa, dan Tailwind hanyalah cara ampuh untuk mencapainya dengan lebih cepat.