tailwind_mastery
Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill tailwind_masteryInstructions
Loading…
Tailwind CSS v4, design tokens, responsive patterns ve utility-first CSS best practices.
npxskills add vuralserhat86/antigravity-agentic-skills--skill tailwind_masteryLoading…
Tailwind CSS v4 ve utility-first CSS best practices rehberi.
/* app.css */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--font-display: "Inter", sans-serif;
--spacing-128: 32rem;
}
/* v4'te content config'e gerek yok */
/* Otomatik olarak tüm dosyalar taranır */
/* Container Queries */
@container (min-width: 400px) {
.card { /* styles */ }
}
/* v4 utility */
<div class="@container">
<div class="@md:flex">...</div>
</div>
<!-- 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 -->
<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 -->
<!-- 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">
@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);
}
<!-- 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+ */
">
<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>
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
Responsive Title
</h1>
<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>
<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>
<!-- 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 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...">
<!-- 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">
<!-- html'e class ekle -->
<html class="dark">
<!-- Component -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
// tailwind.config.js (v3) veya @media (v4)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark')
? 'dark' : 'light';
}
/* v4: Otomatik - sadece kullanılan class'lar bundle'a dahil */
<!-- ❌ 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'}>
// tailwind.config.js
module.exports = {
safelist: [
'bg-red-500',
'bg-green-500',
{ pattern: /^bg-(red|green|blue)-/ },
],
};
# Minified CSS
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify
p-{n}, m-{n}, gap-{n}w-{n}, h-{n}, size-{n}flex, items-center, justify-betweengrid, grid-cols-{n}, gap-{n}text-{size}, font-{weight}, text-{color}border, border-{n}, rounded-{size}shadow, shadow-{size}transition, duration-{ms}, ease-{type}Kaynak: Tailwind CSS v4.0 Release & Adam Wathan's Design Tips
tailwind.config.js yerine CSS-first (@theme) konfigürasyonunu kurgula.@layer base kullanarak global stil sıfırlama (Preflight) ve font yüklemelerini yap.Grid ve Flex kullanarak duyarlı (Responsive) şekilde kur.@container queries ve logical properties (margin-inline vb.) kullanımını önceliklendir.shadow, opacity ve z-index values'larının hiyerarşiye uygunluğunu kontrol et.dark: variant'larının semantik renklerle uyumlu olduğunu doğrula.| 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
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).