v2.5.1
Giri┼č yap

Tailwind'e Giri┼č

Bootstrap'─▒n modas─▒n─▒n ge├žti─či ┼ču g├╝nlerde elbette hayat─▒m─▒za tailwind girdi. Ama├ž ayn─▒ olsada tailwind'in biraz daha farkl─▒ bir yakla┼č─▒m tarz─▒ ve kullan─▒m ├že┼čitlili─či var. Dolay─▒s─▒ ile evet, akl─▒n─▒za gelebilecek neredeyse her t├╝rl├╝ tasar─▒m─▒ hi├ž css kullanmadan tamamen tailwind'in yard─▒mc─▒ s─▒n─▒flar─▒ ile d├Âkmeniz m├╝mk├╝n.

Elbette bunun yan─▒nda responsive y├Ânetiminiz ├žok daha kolayla┼č─▒yor. Akl─▒n─▒za gelebilecek neredeyse her ┼čeyi d├╝┼č├╝nm├╝┼čler :) Biz de geri kalmayal─▒m diye bir bak─▒┼č atal─▒m istiyorum tailwind'e.

Kurulum

1 - CDN ile Kullan─▒m─▒

─░sterseniz CDN servisini kullanarak sadece bir ilgili css dosyas─▒n─▒ dahil ederek tailwind kullanmaya ba┼člayabilirsiniz.

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Tabi CDN kullan─▒nca baz─▒ k─▒s─▒tlamalarda beraberinde geliyor. ├ľzelle┼čtiremedi─činiz i├žin CDN sanki ├žok iyi bir y├Ântem de─čil gibi, ama gelin CDN'i ekleyerek ufak bir ├Ârnekle tailwind'i anlamaya ├žal─▒┼čal─▒m ilk olarak.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CDN ├ľrne─či</title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

    <div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
        Protot├╝rk ile tailwind dersleri ba┼čl─▒yor!
    </div>

    <div class="text-center mt-6">

        <a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
            Be─čendim
        </a>
    
        <a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
            Be─čenmedim
        </a>

    </div>
    
</body>
</html>

sonucu merak edenler: https://codepen.io/tayfunerbilen/pen/dyvBwBG

G├Ârd├╝─č├╝n├╝z gibi tailwind'in bize vermi┼č oldu─ču bir s├╝r├╝ s─▒n─▒f─▒ kullanarak css yazmadan g├Ârselle┼čtirme i┼člemini ba┼čar─▒yla yapt─▒k. hover y├Ânetimi i├žin bile hover: ┼čeklinde kullanarak ne kadar kolay i┼člem yapt─▒─č─▒m─▒za bak─▒n a etiketlerinide.

A├ž─▒k├žas─▒ ben ├žok sevdim, tabi yapabildikleri sadece bu kadar de─čil :) Ben de ke┼čfettik├že makale olarak burada yazmaya devam edece─čim.

2- CLI ile Kullan─▒m─▒

Tailwind'i hi├žbir kurulum yapmadan do─črudan kullanabilirsiniz. ┼×u komutu ├žal─▒┼čt─▒r─▒rsan─▒z size b├╝t├╝n tailwind ├Âzelliklerini i├žeren bir css ├ž─▒kt─▒s─▒ verecektir.

npx tailwindcss -o style.css --minify

Tabi bunun boyutu a┼č─▒r─▒ b├╝y├╝k, kullanmad─▒─č─▒m─▒z bir s├╝r├╝ ┼čey var :) Ama geli┼čtirme ortam─▒ i├žin bu dert de─čil, production ortam─▒na ├ž─▒kar─▒rken kullan─▒lmayanlar─▒n tamam─▒n─▒ silebiliyoruz.

┼×imdi index.html dosyan─▒z─▒ olu┼čturup style.css i ├ža─č─▒rarak kullanmaya ba┼člayabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CLI ├ľrne─či</title>
    <link href="./style.css" rel="stylesheet">
</head>
<body>

    <div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
        Protot├╝rk ile tailwind dersleri ba┼čl─▒yor!
    </div>

    <div class="text-center mt-6">

        <a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
            Be─čendim
        </a>
    
        <a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
            Be─čenmedim
        </a>

    </div>
    
</body>
</html>

Sonu├ž olarak a├ž─▒p dosyan─▒z─▒ bakarsan─▒z i┼če yarad─▒─č─▒n─▒ g├Âreceksiniz.

@apply direktifi

Yukar─▒daki ├Ârne─čimde butonlar─▒n sadece renkleri de─či┼čik geri kalan her ┼čeyi ayn─▒. Hal b├Âyle oluncada insan d├╝┼č├╝nmeden edemiyor, neden s├╝rekli ayn─▒ ┼čeyleri yazmak zorunday─▒m diye? Asl─▒nda de─čilsiniz, @apply direktifi ile kendinize ├Âzel yard─▒mc─▒lar yazabilirsiniz.

├ľrne─čin html kodumuzu ┼č├Âyle de─či┼čtirelim.

<a href="#" class="btn bg-green-200 text-green-700 hover:bg-green-500 hover:text-white">
    Be─čendim
</a>

<a href="#" class="btn bg-red-200 text-red-700 hover:bg-red-500 hover:text-white">
    Be─čenmedim
</a>

─░kisinde de ortak olanlar─▒ sildik. Sadece farkl─▒l─▒k i├žerenleri b─▒rakt─▒k.

┼×imdi .btn i├žin di─čerlerini uygulamam─▒z gerekiyor ancak bunun i├žin ilk olarak bir tailwind.css dosyas─▒ olu┼čtural─▒m. Ve i├žine ┼čunlar─▒ yazal─▒m.

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

@tailwind direktifi css'de yok biliyorum, zaten bunu kullanmayaca─č─▒z bunu kullanarak css ├ž─▒kt─▒s─▒ olu┼čturaca─č─▒z ┼×imdi yukar─▒daki .btn s─▒n─▒f─▒m─▒ bu dosyada ┼č├Âyle tan─▒mlamam gerekiyor.

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

@layer components {
    .btn {
        @apply inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium transition-colors;
    }
}

E─čer burada @layer direktifini kullanmak istemiyorsan─▒z .btn tan─▒m─▒n─▒ @tailwind components; in hemen alt─▒nda yaz─▒n. ├ç├╝nk├╝ di─čer t├╝rl├╝ tailwind'in bize verdi─či s─▒n─▒flar─▒ kullansak bile ezemeyece─čiz. Ayr─▒ca en son production i├žin ├ž─▒kt─▒ alaca─č─▒m─▒zda bunlar kullan─▒lm─▒yor ise kald─▒r─▒l─▒r, bunun d─▒┼č─▒nda yazarsan─▒z her t├╝rl├╝ css'de yer alacakt─▒r.

Sonu├ž olarak bunu kullanarak style.css olu┼čturmak i├žin ├žal─▒┼čt─▒raca─č─▒m─▒z komut:

npx tailwindcss -i tailwind.css -o style.css --minify

Visual Studio Code i├žin Eklenti ├ľnerileri

Tailwind yazacaksan─▒z bir s├╝r├╝ ┼čeyi ezberlemeniz gerekecek. Elbette css'i iyi biliyorsan─▒z ve daha ├Ânce bootstrap gibi ara├žlar kulland─▒ysan─▒z buna a┼čina olman─▒z ├žok uzun s├╝rmez ancak yinede her ┼čeyi ak─▒lda tutmak ├žok ak─▒l k├ór─▒ de─čil :)

Y├╝klemeniz gereken tek eklenti muhtemlen ┼čudur:

Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Ayr─▒ca taray─▒c─▒da de─čilde edit├Âr i├žinde h─▒zl─▒ ├Ânizleme i├žin ┼ču eklentiyi kesinlikle ├Âneririm.

Preview on Web Server
https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

Bu eklentiyi kurduktan sonra vscode settings.json i├žine ┼ču ayar─▒ ekleyin.

"previewServer.port": 3000

art─▒k index.html e sa─č t─▒klay─▒p Preview on side panel ─▒ se├žerseniz sa─č tarafta ├Ânizleme alan─▒ a├ž─▒lacak ve geli┼čtirme yaparken ├Âzellikle b├╝y├╝k ekranda ├žal─▒┼č─▒yorsan─▒z i┼činiz ├žok kolayla┼čacak. Ayr─▒ca tabi ki k─▒sayol tu┼ču olarak control + shift + v kombinasyonunuda kullanabilirsiniz. Bunu kullan─▒rken html dosyan─▒z─▒ d├╝zenliyor oldu─čunuzdan emin olun :)

Sonu├ž

Ba┼člang─▒├ž i├žin fena ┼čeyler yapmad─▒k. A├ž─▒k├žas─▒ ben de d├Âk├╝mantasyonu okuyarak bir ba┼člang─▒├ž yapt─▒m, ├Â─črendik├že bilgilerimi de taze tutmak i├žin burada yazmaya devam edece─čim, 2. makalede g├Âr├╝┼čmek ├╝zere :)

tayfunerbilen
36 g├╝n ├Ânce yazd─▒ - 464 kez g├Âr├╝nt├╝lendi.
├ľnceki CSS inset ├ľzelli─či