Etiket Arşivi: ‘TailwindCss Kurulum’

TailwindCss Kurulum

Node.js’yi yüklemek için aşağıdaki adımları izleyebilirsiniz:

Resmi Node.js web sitesini ziyaret edin: İlk adım, Node.js web sitesine gitmektir. Node.js’i indirmek için en güvenli ve en güncel yöntem budur. Web sitesine buradan ulaşabilirsiniz: Node.js İndirme Sayfası.

Sürüm Seçimi: İndirme sayfasında, yükleme işletim sisteminize uygun olan LTS (Uzun Süreli Destek) sürümünü veya en son kararlı sürümü seçin. LTS sürümü, genellikle daha güvenilirdir ve üretim ortamlarında kullanılması tavsiye edilir.

İndirme ve Kurulum: İndirme işlemi tamamlandıktan sonra, kurulum dosyasını çalıştırın ve kurulum sihirbazındaki adımları izleyin. Genellikle varsayılan seçeneklerle devam etmek güvenlidir. Kurulum tamamlandığında, Node.js ve NPM (Node Package Manager) bilgisayarınıza yüklenmiş olacaktır.

Kontrol Etme: Node.js’in ve NPM’in başarıyla yüklendiğinden emin olmak için terminal veya komut istemcisini açın ve aşağıdaki komutları çalıştırın:

Bir klasör oluşturunuz ve bu klasörü Visual Studio Code ile açınız. Ardından terminale aşağıdaki satırlarını yapıştırınız.

Yukardaki kodlar ile tailwindcss paketi,package.json ve tailwind.config.js dosyasını ana dizinde oluşturulacaktır. Bu dosyada önemli olan content kısmıdır. Html ve stil dosyamızı dist klasörünün  içerisinde saklayacağımızı belirtiyoruz. Ana dizinde dist klasörünü oluşturunuz. tailwind.config.js dosyasına aşağıdaki kodu ekleyiniz.

src klasörünü ana dizinde oluşturunuz. src/input.css içerisine input.css dosyasını oluşturup aşağıdaki kodu içine ekleyiniz.

dist klasörü içerisine index.html dosyasını oluşturunuz. Bu html dosyasında style.css dosyasına link verildiğini görünüz.

Ardından aşağıdaki kodu çalıştırınız. dist klasörü içerisine style.css dosyasını otomatik olarak oluşturacaktır.

Ardından index.html dosyasını açtığımızda değişimi görmemiz gerekiyor. Eğer her defasında yukardaki satırı yazmak istemiyorsak aşağıdaki gibi package.json dosyasını düzenleyebiliriz. “dev” kısmını ekleyiniz.

Ardından terminalde aşağıdaki komutu çalıştırmamız yeterli olacaktır. Klasör yapısının resmini aşağıya bırakıyorum. Kodları indirmek için aşağıdaki linke tıklayabilirsiniz.

Kaynak kodları indirmek için TIKLAYINIZ

Kategori Css
16.03.2024
54 Okunma