Tailwind CSS Öğrenin

Bu, görece yeni ancak son derece popüler ve oyunun kurallarını değiştirmesi muhtemel bir CSS çerçevesi olan Tailwind CSS’yi kullanmak için başlangıç dostu bir kılavuz olacak. Tailwind, bir projenin CSS boyutu büyüdükçe özelleştirmeyi ve bakımını daha da kolaylaştıran bir ilk yaklaşım yaklaşımı benimser.

CSS’nin büyük projelerde yönetilmesi zordur ve bu, Bootstrap, Foundation gibi geleneksel CSS çerçeveleri tarafından daha da kötüleştirilir. Kısacası, CSS hızla bir karmaşaya dönüşür: yazması, düşünmesi ve güncellenmesi daha da zor hale gelir.

Tailwind, bu zorlukların çoğunu daha düşük seviyeli bir yaklaşım benimseyerek çözer: herhangi bir tasarımı oluşturmak ve özelleştirmek için kullanılabilecek CSS yardımcı sınıfları sağlar. Tailwind’e kendiniz bir tur atarak bunu iş başında görmek en iyisidir.

Maalesef, Tailwind CSS’yi yüklemek, resmi kılavuzun da açıkça belirttiği gibi oldukça zor olabilir. Tam teşekküllü bir proje için özelliklere ihtiyaç olsa da, Tailwind’in çoğu bir CDN ve tek bir HTML dosyası aracılığıyla kullanılabilir. Bu kılavuz, CDN yaklaşımının nasıl kullanılacağını göstermeye başlar, ardından tam Node ve bundan sonraki her şeye geçer.

İçindekiler

Tailwind Play

Tailwind’i öğrenmenin en basit yolu bir tarayıcı kullanarak Tailwind Play adresine gidip tarayıcıda interaktif olarak test etmektir.

Bu, mevcut bir HTML sayfasında güncellemelere izin verir ve değişiklikleri görselleştirir. Çeşitli özellikleri ve genel Tailwind yaklaşımını denemek, Tailwind dokümanlarıyla birlikte harika bir ilk adımdır.

CDN

İkinci en kolay yaklaşım ve başlamayı önereceğim yaklaşım, Tailwind CDN’yi tek bir HTML dosyasında kullanmaktır. Bu şekilde tam kontrole sahip olursunuz ve gerçek dünya geliştirme deneyimini taklit edebilirsiniz.

Başlamak için tailwind-cdn adında yeni bir klasör oluşturun ve içine gidin. Ardından index.html adlı bir dosya oluşturun.

Yalnızca bir div, bir başlık ve bir miktar paragraf metni olacak temel bir HTML5 şablonuyla başlayalım.


<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div class="container">
    <h1>Merhaba, Tailwind!</h1>
    <p>Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>
  </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1>Merhaba, Tailwind!</h1>

<p>Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>

</div>

</body>

</html>

tailwind-cdn klasöründe olduğunuz için komut satırınızdan bu dosyayı aslında bir web tarayıcısında açabilirsiniz. Öyleyse yapın!

Tailwind CDN’sini eklemek için tek yapmamız gereken bölümümüzü aşağıdaki satırla güncellemektir:


<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

İşte tam güncellenmiş index.html dosyasının nasıl görünmesi gerektiği.


<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Merhaba, Tailwind!</h1>
    <p>Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>
  </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1>Merhaba, Tailwind!</h1>

<p>Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>

</div>

</body>

</html>

Dosya değişikliklerini kaydeder ve web tarayıcınızı yenilerseniz, tüm biçimlendirmenin kaldırıldığını görürsünüz.

Metnimiz mevcut web sayfasında oldukça sıkışık değil mi? Metnimizin kenarlarına yatay olarak ve metnin arasına dikey olarak biraz kenar boşluğu dolgusu eklemek güzel olurdu.

Mevcut <div class=”container”> a yatay boşluk eklemek için, yalnızca mx-5 sınıfını ekliyoruz, böylece bu, haline geliyor:

m, margin anlamına gelir
x, x ekseni için geçerli anlamına gelir
5, tailwind için hatırlatılan göreli birim uzunluğunu temsil eder

Benzer düzenlemeyi <p> etiketi içinde <p class=”my-5″> olarak kullanarak y-axis üzerinde yapabiliriz. x-axis içinde y yerine x kullanılabilir.


<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-5">
    <h1>Merhaba, Tailwind!</h1>
    <p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>
  </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1>Merhaba, Tailwind!</h1>

<p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>

</div>

</body>

</html>

Web sayfanızı tekrar yenileyin ve artık hem yatay hem de dikey kenar boşluklarının eklendiğini göreceksiniz.

Tailwind CSS kullanarak sayfayı güncellemeye devam edelim. <h1> etiketinin yazı boyutunu yeniden şekillendirmek için text-2xl ve kalın için de font-bold sınıflarını ekliyoruz. <h1> etiketini güncellediğimizde şu şekilde olacaktır: <h1 class="text-2xl font-bold">.

Tüm kodları şu şekilde oluşur:


<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-5">
    <h1 class="text-2xl font-bold">Merhaba, Tailwind!</h1>
    <p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>
  </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1 class="text-2xl font-bold">Merhaba, Tailwind!</h1>

<p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>

</div>

</body>

</html>

Web sayfanızı tekrar yenileyin ve değişiklikleri iş başında göreceksiniz.

Tailwind CSS’yi iş başında göstermek için bir başka örnek de stil düğmeleriyle ilgilidir. Bizim durumumuzda, bir “Buradan kaydolun!” Ekleyelim. üzerinde koyu maviye dönen mavi buton. Kod şuna benzer:


<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-5">
    <h1 class="text-2xl font-bold">Merhaba, Tailwind!</h1>
    <p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>
    <button class="text-white font-bold bg-blue-600 hover:bg-blue-800 py-2 px-4 rounded">
        Button!
      </button>
  </div>
</body>
</html>

<html>

<head>

</head>

<body>

<h1 class="text-2xl font-bold">Merhaba, Tailwind!</h1>

<p class="my-5">Hadi yeni CSS frameworkü öğrenmeye başlayalım.</p>

Button!

</button>

</div>

</body>

</html>

Tailwind’in aşağıdakileri yapması için:

text-white yazıyı beyaz yapar
font-bold fontu kalın yapar
bg-blue-600 600 gölgeli mavi arkaplan yapar.
hover:bg-blue-800 üzerine gelindiğinde 800 gölgeli arkaplan yapar.
py-2 dikey padding değerini 2rem yapar.
px-4 yatay padding değerini 4 rem yapar.
rounded buton kenarlarını yuvarlar.

Tailwind’e yıldırım hızında bir giriş ve CSS yazmaya yönelik yeni yaklaşımına yönelik bir tat.

CDN seçeneği, başlamak için harika bir yoldur, ancak belgelerde belirtildiği gibi bazı sınırlamaları vardır. Önerilen yaklaşım, Tailwind’i tüm özelliklerinden yararlanmak için bir PostCSS eklentisi olarak kullanmaktır. Bunu bir sonraki bölümde ele alacağız.

Tailwind NPM ile Kurulum (PostCSS Eklentisi)

Tailwind CSS, nihayetinde bir PostCSS eklentisidir, bu nedenle, Tailwind’den özellikler ve performans açısından en iyi şekilde yararlanmak için, bu şekilde çalıştırılmalıdır. Bunu yapmak, bir CDN kullanmaktan biraz daha fazla kurulum gerektirir, ancak çok basit şekilde yapılabilir. Tailwind’in yaratıcısı Adam Wathan, 2019’da bu kurulumla ilgili bir YouToube serisi yayınladı. Bu notların birkaç güncellemesi var ancak büyük ölçüde sunumunu takip ediyor.

Not: Yerel bilgisayarınıza henüz yüklemediyseniz NPM yüklemeniz gerekecektir.

Başlamak için bilgisayarınızda yeni bir dizin oluşturun ve buraya girin. Benimkine tailwind-calisma demeye karar verdim.


mkdir tailwind-calisma
cd tailwind-calisma

mkdir tailwind-calisma

cd tailwind-calisma

İlk adım, Terminal’inizden aşağıdaki komutla yapılabilen temel bir package.json dosyası oluşturmaktır:


npm init -y

npm init -y

Ortaya çıkan dosyam aşağıdaki gibi görünüyor:

package.json


{
  "name": "tailwind-calisma",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

{

"name": "tailwind-calisma",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC"

}

Ardından, postcss’nin kendisi, postcss-cli ve CSS öneklerinize otomatik olarak sağlayıcı eklentileri ekleyen autoprefixer dahil olmak üzere bir PostCSS eklentileri zinciri aracılığıyla CSS’yi işlemeye yardımcı olacak bazı araçlar ile tailwindcss yükleyin.


npm install tailwindcss postcss postcss-cli autoprefixer

npm install tailwindcss postcss postcss-cli autoprefixer

Bu eklentilerle artık yeni bir bağımlılıklar bölümüne sahip olan package.json dosyanızın içine bakın. Ayrıca ilk kez bir package-lock.json dosyası oluşturuldu, ancak onu incelemeniz gerekmez.

package.json


{
  "name": "tailwind-calisma",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.1"
  }
}

{

"name": "tailwind-calisma",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"autoprefixer": "^10.2.5",

"postcss": "^8.2.10",

"postcss-cli": "^8.3.1",

"tailwindcss": "^2.1.1"

}

postcss.config.js ve tailwind.config.js oluşturulması gerekir. PostCSS yapılandırmanıza tailwindcss ve autoprefixer eklenir. Tailwind’i daha sonra özelleştirmek için, aşağıdaki gibi bir tailwind.config.js dosyasını da oluşturur. Oluşturan komut aşağıdaki gibidir.


npx tailwindcss init -p

npx tailwindcss init -p

postcss.config.js


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

}

tailwind.config.js


module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

module.exports = {

purge: [],

darkMode: false, // or 'media' or 'class'

theme: {

extend: {},

variants: {

extend: {},

plugins: [],

}

Tailwind, özel işaretçiler için bir CSS dosyasına bakarak ve bunları Tailwind’in oluşturduğu kodla değiştirerek çalışır. Yeni bir css klasörü içinde tailwind.css adlı yeni bir CSS dosyası oluşturun.

Ardından dosyanın içine base, components, ve utilities üç yönerge ekleyin. CSS’miz PostCSS aracılığıyla derlendiğinde, Tailwind her birini bulacak ve buna göre Tailwind koduyla değiştirecektir. Bunun ne anlama geldiğini birazdan göreceğiz.

css/tailwind.css


/* css/tailwind.css */

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

/* css/tailwind.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Derlenen dosya ile çalışmak için bir tane public klasörü oluşturup içinde index.html ve tailwind.css dosyasını oluşturun.

index.html


<!DOCTYPE html>
<html lang="tr">
<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>Tasarım Kodlama</title>
    <link rel="stylesheet" href="tailwind.css">
</head>
<body>

    <h1 class="text-center text-2xl text-red-500"></h1>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

</body>

</html>

Tailwind’i oluşturmadan önceki son adım, CSS’mizi PostCSS eklentileri aracılığıyla işlemek için basit bir komut dosyasına ihtiyacımız olmasıdır. Mevcut package.json dosyasına, postcss-cli kullanan, css/tailwind.css‘yi girdi dosyası olarak alan ve çıktıyı public/build/tailwind.css adlı yeni bir dosyaya belirten bir yapı betiği ekleyin.

package.json


{
  "name": "tailwind-calisma",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss ./css/tailwind.css -o ./public/tailwind.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.1"
  }
}

{

"name": "tailwind-calisma",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"build": "postcss ./css/tailwind.css -o ./public/tailwind.css"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"autoprefixer": "^10.2.5",

"postcss": "^8.2.10",

"postcss-cli": "^8.3.1",

"tailwindcss": "^2.1.1"

}

package.json dosyasının yukarıdaki gibi güncelledikten sonra terminalden bu satırı çalıştıran komutu aşağıdaki gibi çalıştırınb dosyasına ait tüm tasarım kodları public/tailwind.css içinde oluşacaktır.


npm run build

npm run build

Artık tailwind çerçevesi yüklendi. HTML dosyasını açıp istediğiniz gibi düzenleme yapabilirsiniz.

Ek Ayarlar

Kullanılmayan CSS sınıflarını kaldırın. Aşağıdaki adımlar gerçekleştirdiğinizde tailwind.css içindeki kullanılmayan tüm CSS sınıfları kaldırılacaktır.

Fakat çıktı olarak üretilen kod yaklaşık olarak 3.5MB boyutundadır. Kullanmadığımız CSS kodları için ek bir ayar daha yapılması gerekiyor. Öncelikli olarak win-node-env kütüphanesini yükleyin.


npm install win-node-env

npm install win-node-env

package.json dosyasını açın ve prod komutunu ekleyin.


{
  "name": "tailwind-calisma",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build" : "postcss ./css/tailwind.css -o ./public/tailwind.css",
    "prod"  : "NODE_ENV=production postcss ./css/tailwind.css -o ./public/tailwind.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.1",
    "win-node-env": "^0.4.0"
  }
}

{

"name": "tailwind-calisma",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"build" : "postcss ./css/tailwind.css -o ./public/tailwind.css",

"prod" : "NODE_ENV=production postcss ./css/tailwind.css -o ./public/tailwind.css"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"autoprefixer": "^10.2.5",

"postcss": "^8.2.10",

"postcss-cli": "^8.3.1",

"tailwindcss": "^2.1.1",

"win-node-env": "^0.4.0"

}

Temizleme işlemini yaparken hangi dosyaları kontrol edeceğinizi de tailwind.config.js dosyasını açarak belirtin.


module.exports = {
  purge: [
    './public/**/*.html',
    './public/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

module.exports = {

purge: [

'./public/**/*.html',

'./public/**/*.js',

darkMode: false, // or 'media' or 'class'

theme: {

extend: {},

variants: {

extend: {},

plugins: [],

}

public klasörü içindeki html ve js uzantılı tüm dosyaları kontrol edeceğini ifade etmiş olduk.

Kullanılmayan CSS sınıflarını kaldırmak için terminale aşağıdaki komutu yazınız.


npm run prod

npm run prod

Sonuç

Bu kılavuz hala devam etmektedir, ancak umarım kurulum talimatları Tailwind hakkında daha fazla bilgi edinmek isteyen herkese yardımcı olur. Zaman elverdikçe daha fazla içerik ekleyeceğim.

Tailwind kendi başına bir tasarımla gelmediğinden, birçok geliştiricinin, kendiniz bir tasarımcı değilseniz bir web sitesine eklenebilecek önceden hazırlanmış bir dizi ücretli UI bileşeni olan Tailwind Kullanıcı Arayüzüne eriştiğini unutmayın.