Tailwind CSS Academy · Ders

tailwind.config.js Dosyasının Yapısı

content, theme, extend, plugins ve presets bölümleri de dahil olmak üzere yapılandırma dosyasının her bölümünü ve bunların derlemeyi nasıl etkilediğini anlayın.

1. ders / 413 adım

tailwind.config.js Dosyasının Yapısı, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Yapılandırma Dosyası Neden Var

Tailwind CSS, özünde özelleştirilebilir olacak şekilde tasarlanmıştır. tailwind.config.js dosyası, varsayılan tasarım sistemine yapılan tüm özelleştirmeler için tek doğruluk kaynağıdır. Bu dosya olmadan Tailwind'in makul varsayılanlarını kullanırsınız. Dosyayla birlikte tasarım sisteminin renkler, yazı tipleri, boşluklar, kırılma noktaları, animasyonlar ve daha fazlası gibi herhangi bir bölümünü yeniden tanımlayabilir, üstelik tüm yardımcı sınıf API'sini otomatik olarak oluşturmaya devam edebilirsiniz.

Yapılandırma Dosyası Oluşturma

npx tailwindcss init komutunu çalıştırarak varsayılan bir yapılandırma dosyası oluşturun. Bu komut, en yaygın bölümler için boş taslaklar içeren en temel tailwind.config.js dosyasını oluşturur. Her varsayılan değeri içeren eksiksiz bir yapılandırma oluşturmak için npx tailwindcss init --full komutunu kullanın. Bu seçenek başvuru amacıyla kullanışlıdır, ancak günlük çalışmalarda genellikle fazla ayrıntılıdır.

# Generate a minimal config
npx tailwindcss init

# Generate a full config showing all defaults
npx tailwindcss init --full

# Generate config + postcss.config.js together
npx tailwindcss init -p

content Bölümü

content dizisi, Tailwind'in sınıf adlarını nerede arayacağını belirtir; böylece yalnızca projenizin gerçekten kullandığı yardımcıları dahil edebilir. Tailwind sınıfları içeren HTML, JS, JSX, TSX, Vue ve diğer dosyalara işaret eden glob kalıpları sağlarsınız. Bunu doğru yapmak kritik önem taşır; bir dosyanın eksik olması, o dosyadaki sınıfların üretim derlemesinden temizlenmesine neden olur.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  // ...
};

theme Bölümü

theme bölümü tüm tasarım belirteci yapılandırmalarını içerir: renkler, boşluklar, typography, kırılma noktaları, gölgeler, kenarlık yarıçapları ve daha fazlası. Varsayılanları extend ederek mevcut değerlerin yanına yeni değerler ekleyebilir veya override ederek varsayılanları tamamen değiştirebilirsiniz. Tema nesnesi, her anahtarın bir yardımcı kategorisine karşılık geldiği Tailwind'in dahili yapısını yansıtır.

// tailwind.config.js
module.exports = {
  theme: {
    // OVERRIDE: replaces ALL default font sizes
    fontSize: {
      sm: '0.875rem',
      base: '1rem',
      lg: '1.25rem',
    },
    extend: {
      // EXTEND: adds TO the default font sizes
      fontSize: {
        '2xs': '0.625rem',
      },
    },
  },
};

extend Anahtarının Açıklaması

theme.extend nesnesi, Tailwind'in varsayılanlarını değiştirmeden özel değerler eklediğiniz yerdir. extend içindeki her şey varsayılanların yerine geçmez; mevcut varsayılanlarla birleştirilir. Çoğu proje için önerilen yaklaşım budur: Tailwind'in sunduğu her şeyi korurken projenize özel değerleri bunların üzerine eklersiniz. Doğrudan tema geçersiz kılmalarını yalnızca varsayılanları gerçekten kaldırmak istediğiniz durumlar için kullanın.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
};

plugins Bölümü

Eklentiler dizisi, oluşturulan CSS'i genişleten resmî Tailwind eklentilerini ve özel eklentileri kabul eder. Eklentiler yeni yardımcı sınıflar, yeni bileşen sınıfları, yeni temel stiller veya yeni varyantlar ekleyebilir. Bunları diğer Node.js modülleri gibi gerektirir ve seçenekleri destekleyen eklentilere yapılandırma nesneleri iletebilirsiniz. Eklentiler bölümü tema çözümlendikten sonra çalıştığı için eklentiler tüm tema değerlerine erişebilir.

// tailwind.config.js
const forms = require('@tailwindcss/forms');
const typography = require('@tailwindcss/typography');

module.exports = {
  plugins: [
    forms,
    typography({ strategy: 'class' }),
    require('@tailwindcss/aspect-ratio'),
  ],
};

Presets Bölümü

Presets dizisi, birden fazla Tailwind yapılandırmasını birlikte oluşturmanıza olanak tanır. Bir preset, temel olarak kullanılan bir Tailwind yapılandırma nesnesidir. Projenizin yapılandırması bunun üzerine birleştirilir. Bu, tek bir depo içindeki birden fazla proje arasında temel bir tasarım sistemini paylaşmak için önerilen yaklaşımdır: belirteçleri bir preset paketinde bir kez tanımlayın ve her yerde kullanın.

// packages/ui-config/tailwind.preset.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#6366f1' },
    },
  },
};

// apps/my-app/tailwind.config.js
module.exports = {
  presets: [require('@company/ui-config/tailwind.preset')],
  content: ['./src/**/*.tsx'],
};

darkMode Ayarı

darkMode anahtarı, Tailwind'in dark: varyantının nasıl etkinleşeceğini denetler. Koyu stilleri işletim sistemi tercihine göre etkinleştirmek için 'media', bir üst öğede dark sınıfının bulunmasını zorunlu kılmak için 'class' değerini ayarlayın. Tailwind v3.3 ve sonraki sürümlerde özel bir seçiciyle dizi de iletebilirsiniz: ['class', '.theme-dark']. Böylece dark yerine farklı bir sınıf adı kullanabilirsiniz.

// tailwind.config.js
module.exports = {
  darkMode: 'class',  // or 'media', or ['class', '.theme-dark']
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
};

Yapılandırmayı ESM veya CJS Olarak Kullanma

Varsayılan olarak Tailwind, bir CommonJS modülü (module.exports) bekler. ESM (type: 'module' in package.json) kullanan projelerde, CommonJS söz dizimini açıkça kullanmak için yapılandırmanıza tailwind.config.cjs adını verin. 2024'te yayımlanan Tailwind v4, tamamen CSS öncelikli bir yapılandırma yaklaşımına geçer; ancak hâlâ en yaygın olan v3 projelerinde CJS söz dizimine sahip tailwind.config.js standarttır.

// tailwind.config.cjs (for ESM projects)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Yapılandırmada TypeScript Türlerini Kullanma

TypeScript'e dönüştürme yapmadan VSCode'da otomatik tamamlama almak için yapılandırma dosyanıza bir JSDoc @type açıklaması ekleyin. Tür, doğrudan tailwindcss paketinden gelir. Bu, düzenleyicinize yapılandırma nesnesinin tam yapısını bildirir; böylece bir tema anahtarını yanlış yazdığınızda veya geçersiz bir değer ilettiğinizde otomatik tamamlama ve tür hataları alırsınız.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        primary: '#6366f1', // autocomplete shows available color keys
      },
    },
  },
  plugins: [],
};

Yapılandırma Bölümlerine Genel Bakış

tailwind.config.js dosyasının tüm yapısını özetlemek gerekirse: content hangi dosyaların taranacağını tanımlar, theme tasarım belirteçlerini tanımlar ve eklemeli değişiklikler için extend kullanılır, plugins genişletilmiş işlevler ekler, presets temel yapılandırmaları bir araya getirir ve darkMode koyu varyant davranışını denetler. Her bölüm isteğe bağlıdır; boş bir yapılandırma geçerlidir ve yalnızca Tailwind'in tüm varsayılanlarını kullanır.

// tailwind.config.js — full anatomy
module.exports = {
  content: [],      // file globs to scan
  darkMode: 'class', // dark mode strategy
  theme: {
    // override defaults here
    extend: {
      // add to defaults here
    },
  },
  plugins: [],      // extend Tailwind's output
  presets: [],      // compose from base configs
};

Hızlı Kontrol

Tailwind CSS yapılandırma dosyasının yapısını ne kadar anladığınızı test edin.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: content dizisi sınıf adlarının aranacağı dosyaları belirtir, theme.extend varsayılan değerlerin yanına yeni değerler eklerken doğrudan theme üzerine yazmak bu değerlerin yerine yenilerini koyar; plugins ve presets ise Tailwind'in yeteneklerini birleştirip genişletir. Sırada içerik yollarını ve Tailwind'in üretim ortamında kullanılmayan sınıfları nasıl ayıkladığını inceleyeceğiz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 30
Dersler: 120

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“tailwind.config.js Dosyasının Yapısı” dersi ücretsiz mi?

Evet — “tailwind.config.js Dosyasının Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“tailwind.config.js Dosyasının Yapısı” dersinde ne öğreneceğim?

content, theme, extend, plugins ve presets bölümleri de dahil olmak üzere yapılandırma dosyasının her bölümünü ve bunların derlemeyi nasıl etkilediğini anlayın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“tailwind.config.js Dosyasının Yapısı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

tailwind.config.js Dosyasının Yapısı
İçerik Yolları ve Kullanılmayanları Temizleme
Temayı Genişletme ve Üzerine Yazma
Eklenti Ekleme ve Yapılandırma

← Tailwind CSS Academy Sayfasına Dön