tailwind-mastery

Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices.

الانتقال إلى التثبيت

المستودع: vuralserhat86/antigravity-agentic-skills
آخر نشاط في المصدر: ٣ يناير ٢٠٢٦ في ١٢:١٩
لغة SKILL.md المكتشفة: التركية
النجوم: ٤٣
التفرعات: ١١

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

العودة إلى البحث العودة إلى التثبيت

name	tailwind_mastery
description	Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices.

🎨 Tailwind Mastery

Tailwind CSS v4 ve utility-first CSS best practices rehberi.

📋 İçindekiler

Tailwind v4 Yenilikleri
Design System
Responsive Patterns
Component Patterns
Dark Mode
Performance

1. Tailwind v4 Yenilikleri

CSS-First Configuration

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Inter", sans-serif;
  --spacing-128: 32rem;
}

Otomatik Content Detection

/* v4'te content config'e gerek yok */
/* Otomatik olarak tüm dosyalar taranır */

Native CSS Features

/* Container Queries */
@container (min-width: 400px) {
  .card { /* styles */ }
}

/* v4 utility */
<div class="@container">
  <div class="@md:flex">...</div>
</div>

2. Design System

Spacing Scale

<!-- 4px base (0.25rem) -->
<div class="p-1">  <!-- 4px -->
<div class="p-2">  <!-- 8px -->
<div class="p-4">  <!-- 16px -->
<div class="p-8">  <!-- 32px -->
<div class="p-16"> <!-- 64px -->

Typography Scale

<h1 class="text-4xl font-bold"><!-- 36px -->
<h2 class="text-3xl font-semibold"><!-- 30px -->
<h3 class="text-2xl font-medium"><!-- 24px -->
<p class="text-base"><!-- 16px -->
<small class="text-sm"><!-- 14px -->

Color System

<!-- Primary palette -->
<div class="bg-blue-500 hover:bg-blue-600">
<div class="text-blue-700 dark:text-blue-300">

<!-- Semantic colors -->
<div class="bg-success"> <!-- Custom -->
<div class="text-error">

Custom Theme

@theme {
  /* Colors */
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  
  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  
  /* Shadows */
  --shadow-soft: 0 2px 15px -3px rgb(0 0 0 / 0.1);
}

3. Responsive Patterns

Breakpoints

<!-- Mobile first -->
<div class="
  w-full          /* base: mobile */
  md:w-1/2        /* 768px+ */
  lg:w-1/3        /* 1024px+ */
  xl:w-1/4        /* 1280px+ */
  2xl:w-1/5       /* 1536px+ */
">

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Title
</h1>

Hide/Show

<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>

4. Component Patterns

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-2xl
  shadow-lg hover:shadow-xl
  transition-shadow duration-300
  p-6
  border border-gray-100 dark:border-gray-700
">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="text-gray-600 dark:text-gray-300 mt-2">Content</p>
</div>

Button Variants

<!-- Primary -->
<button class="
  bg-blue-600 hover:bg-blue-700
  text-white font-medium
  px-6 py-3 rounded-lg
  transition-colors
  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  Primary
</button>

<!-- Secondary -->
<button class="
  bg-gray-100 hover:bg-gray-200
  text-gray-900 font-medium
  px-6 py-3 rounded-lg
  transition-colors
">
  Secondary
</button>

<!-- Outline -->
<button class="
  border-2 border-blue-600
  text-blue-600 hover:bg-blue-50
  font-medium px-6 py-3 rounded-lg
  transition-colors
">
  Outline
</button>

Input

<input class="
  w-full px-4 py-3
  border border-gray-300 rounded-lg
  focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  outline-none transition
  placeholder:text-gray-400
" placeholder="Enter text...">

Flex Patterns

<!-- Center -->
<div class="flex items-center justify-center min-h-screen">

<!-- Space between -->
<div class="flex items-center justify-between">

<!-- Stack (vertical) -->
<div class="flex flex-col gap-4">

5. Dark Mode

Class Strategy

<!-- html'e class ekle -->
<html class="dark">

<!-- Component -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

System Preference

// tailwind.config.js (v3) veya @media (v4)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

Toggle Implementation

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') 
    ? 'dark' : 'light';
}

6. Performance

Purge Optimization

/* v4: Otomatik - sadece kullanılan class'lar bundle'a dahil */

Avoid Dynamic Classes

<!-- ❌ YANLIŞ: Dinamik class purge edilebilir -->
<div class={`text-${color}-500`}>

<!-- ✅ DOĞRU: Tam class adı -->
<div class={color === 'red' ? 'text-red-500' : 'text-blue-500'}>

Safelist (Gerekirse)

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    { pattern: /^bg-(red|green|blue)-/ },
  ],
};

Production Build

# Minified CSS
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify

🎯 Quick Reference

Spacing: `p-{n}`, `m-{n}`, `gap-{n}`

Sizing: `w-{n}`, `h-{n}`, `size-{n}`

Flex: `flex`, `items-center`, `justify-between`

Grid: `grid`, `grid-cols-{n}`, `gap-{n}`

Text: `text-{size}`, `font-{weight}`, `text-{color}`

Border: `border`, `border-{n}`, `rounded-{size}`

Shadow: `shadow`, `shadow-{size}`

Transition: `transition`, `duration-{ms}`, `ease-{type}`

🔄 Workflow

Kaynak: Tailwind CSS v4.0 Release & Adam Wathan's Design Tips

Aşama 1: Foundation & Theme Setup

V4 Configuration: tailwind.config.js yerine CSS-first (@theme) konfigürasyonunu kurgula.
Design Tokens Ingestion: Renk paleti, typography scale ve spacing değerlerini CSS değişkenleri olarak tanımla.
Base Style Reset: @layer base kullanarak global stil sıfırlama (Preflight) ve font yüklemelerini yap.

Aşama 2: Utility-First Implementation

Layout Orchestration: Sayfa yapısını Grid ve Flex kullanarak duyarlı (Responsive) şekilde kur.
Interaction Variants: Hover, focus, active ve group-hover state'lerini kullanarak etkileşimi artır.
Modern CSS Utilities: @container queries ve logical properties (margin-inline vb.) kullanımını önceliklendir.

Aşama 3: Polish & Optimization

Visual Hierarchy Audit: shadow, opacity ve z-index values'larının hiyerarşiye uygunluğunu kontrol et.
Dark Mode Sync: dark: variant'larının semantik renklerle uyumlu olduğunu doğrula.
Bundle Check: Production build sonrası CSS boyutunu ve gereksiz class kullanımını (Unused CSS) denetle.

Kontrol Noktaları

Aşama	Doğrulama
1	Karmaşık komponentler için `@apply` yerine "extract to component" stratejisi mi kullanıldı?
2	Yazı tipi (Typography) okunabilirliği kontrast testinden geçiyor mu?
3	Responsive kırılmalar (sm, md, lg) içerik odaklı mı?

Tailwind Mastery v1.5 - With Workflow