Tailwind CSS Nasıl Kurulur

Tailwind css bizlere, neye ihtiyacımız varsa o kadar class tanımlaması getiren dinamik css oluşturan bir yapıdır. Yakında Bootstrap’ın tabutuna çiviyi çakacağına inanmaktayım.

Tailwind ‘i en verimli şekilde kullanabilmek için öncelikle bilgisayarımızda NodeJS yüklü olması gerekiyor. Çünkü kurulum aşamasında NPM komutları çalıştıracağız. Bunun için gerekli.

1.) NodeJS Kur

Node.js (nodejs.org) adresine giderek, nodeJS’in bilgisayarınız için en uygun olan versiyonunu indirip, kurun.

2-) Visual Studio Code (VsCode) Kur

 

Visual Studio Code – Code Editing. Redefined tıklayarak resmi sayfasına girip oradan download simgesine tıklayarak indirip kurabilirsiniz.

3-) VSCode’a Live Server Eklentisi Kur

VsCode’u açtığınızda sol taraftaki siderbar’ın en altındaki buton, eklentileri görüntüleyebileceğiniz ve hatta indirebileceğiniz alandır. Buradaki arama kutusuna “Live Server” yazarsanız ve çıkan ilk sonucu seçip INSTALL derseniz kurulum gerçekleşecektir. Bu eklendi, yaptığımız değişikliklerin canlı olarak html dosyalarına yansımasını sağlamak için çok kullanışlı olacaktır.

 

 

 

 

 

4-) VsCode – Tailwind’in VsCode için eklentisini indirelim

Bu eklenti sayesinde, projemizde tailwind kurulu olmasa bile, tailwind classlarını çağırmamıza yardımcı olacak “Intellisense” özelliği katacaktır. Kurulumunu, 3. adımdaki aynı mantıkla yapabilirsiniz. Kurmak şart değildir, ama hayatınızı kolaylaştıracaktır.

5-)VsCode – Yeni Bir Klasör Açalım

VSCode’u açtığımızda karşımıza çıkan ekranda Open Folder diyelim, daha sonra projemizi nereye açmak istiyorsak, orada bir klasör oluşturalım. Ben test amaçlı “tailwindTest” diye yeni bir klasör oluşturup, onu seçiyorum.

 

 

 

 

6-)src ve public klasörleri oluşturalım

Yandaki görselde kırmızı ile gösterdiğim butona tıklayınca, yeni klasör oluşturuyorsunuz. Ona tıklayınca size altta bir kutucuk açacak ve klasörün ismi ne olsun diye soracak. Bu şekilde bir tane src bir tane de public diye bir klasör açalım. Bunun amacı, kullanıcıya gösterilmesine gerek olmayan kısımları “src” klasöründe tutalım, yayınlayacağımız kısımları ise “public” klasöründe tutalım. ilk klasörü ekledikten sonra, dikkat edin, ikinci klasörü birincinin alt klasörü gibi eklemeyin.

7-)Styles ve Index dosyalarımızı oluşturalım

Az önce oluşturmuş olduğumuz “src” klasörü altına bir “style.css” dosyası, “public” klasörü altına ise bir tane “index.html” dosyası oluşturalım.

8 -) Terminal Ekranından ilk komutumuzu çalıştıralım

Yukarıdaki menuden Terminal’e tıklıyoruz sonra New Terminal dediğimizde ekranın altında bir terminal alanı açılıyor. Oraya ilk sihirli komutumuzu yazıyoruz

npm init -y

ve enter a basıyoruz. Bunu yaptıgımızda projemize bir tane package.json dosyası eklendiğini göreceğiz. Bu komut, bir nevi, bu projede npm kullanarak birşeyler yapacağız dercesine bir aktifleştirme komutu gibi düşünebilirsiniz.

9 -) NPM ile Tailwind’i nihayet indiriyoruz.

npm i -D tailwindcss

komutunu çalıştırıyoruz. Kod eğer düzgün çalıştıysa, sol taraftaki dosya listemizin artık şu şekilde gözükmesi lazım yani, node_modules ‘un gelmiş olması lazım.

10 -) Tailwind CSS Config File Oluşturuyoruz

Terminal ekranına ,

npx tailwindcss init

yazıyoruz ve bunun sonunda sol taraftaki dosya listemize, tailwindcss.config.js dosyasının oluştuğunu görüyoruz

11-) Tailwindcss.config.js Dosyasında Content kısmını tamımlıyoruz

content kısmının içerisine çift tırnak içerisinde, tailwind’in hangi dosyaların içerisindeki class isimlerine bakarak css dosyasını oluşturacağını belirliyoruz. Burada *.* gibi ibareler kullanarak bir klasor altındaki tüm html dosyalarına bak şeklinde ifadeler kullanabiliriz. Ancak bizim senaryomuzda şuan sadece index html kullanıldığı için onun direkt adını yazmak yeterli.

 

 

12-) Tailwind’in hangi kısımlarını kullanacağımızı belirtiyoruz

Bunun için 7. adımda oluşturduğumuz  styles.css dosyası  içerisine
@tailwind base;

@tailwind components;

@tailwind utilities;

yazıp ana dizine kaydediyoruz.

13-) Tailwind CSS’imizi oluşturalım

 

npx tailwindcss -i ./styles.css -o ./public/style.css --watch

yazarak bizim için public klasoru içerisine ihtiyacımız kadar olanı dahil edecek bir css dosyası oluşturmasını sağlıyoruz.

14-) Oluşan CSS Dosyasını index.html içerisinde refere ediyoruz