Bu sefer konumuz, front-end geliştiricisi olmak isteyenleri yakından ilgilendiren bir konu. TailwindCSS kullanarak, HTML  kodlarınız ile kolay ve hızlı bir şekilde modern web siteler oluşturabilirsiniz. Bağlantıya tıklayarak, TailwindCSS’in kendi websitesinden ayrıntılı bilgiler alabilirsiniz. Biz bu yazımızda TailwindCSS ile nasıl proje oluşturulur? konusuna değineceğiz. TailwindCSS ile yeni bir proje oluşturmak için lütfen aşağıdaki adımları takip edin.

Ayrıca eğer kodlamaya yeni başlıyorsanız, Yalın ve Temiz Kod Nasıl Yazılır? konulu blog gönderimizi de okumanızı tavsiye ederiz.

1. TailwindCss için Klasör Oluşturun

Linux işletim sistemi kullanıyorsanız, terminalinizi açın ve şunu yazın:

Panoya Kopyala!
ve ardından oluşturduğumuz “tailwind_dev” klasörünü açın.
Panoya Kopyala!

2. package.json dosyası oluşturun

package.json dosyasını oluşturmak için npm‘ye ihtiyacınız var. npm bilgisayarınızda kurulu değilse,  bu bağlantıyı takip edin. Eğer kurulu ise; terminalinize aşağıdaki satırı girebilirsiniz.

Panoya Kopyala!

Artık oluşturduğunuz tailwind_dev klasörünü kontrol ederseniz; package.json dosyasını görebilirsiniz!

3. TailwindCss’i Ekleyin

Bunun için yapmanız gereken şey çok kolay. Zaten hali hazırda “npm” kurulu olduğu için terminalinizi açın ve aşağıdaki kodu buraya yazın.

Panoya Kopyala!

4. public ve src klasörlerini oluşturun

Bunun için yine terminalinizde kullanmanız gereken kodlar şunlardır.

Panoya Kopyala!
Panoya Kopyala!

5. css dosyası oluşturun

Css dosyanızı kurmak için “src” klasörünü kullanacağız. Öncelikle terminali kullanarak “src” klasörüne giriş yapalım.

Panoya Kopyala!

ardından “style.css” isimli bir css dosyası oluşturalım.

Panoya Kopyala!

6. html dosyası oluşturun

Html dosyasını oluşturmak için “public” klasörüne giriş yapacağız.

Panoya Kopyala!

ardından;

Panoya Kopyala!

7. İçe Aktarma Bilgileri

Kullanacağınız kod editörünü açın. Oluşturduğunuz bu klasörleri içeri aktarın. “src” klasörü içerisindeki “style.css” dosyasını açın. Tailwind tabanını, bileşenlerini ve yardımcı programları içe aktarmak için bu kodları yazın.

Panoya Kopyala!

ve elbette tüm bu değişiklikleri kaydedin!

8. package.json üzerinde değişiklikler yapın

Kullandığınız editör ile “package.json” dosyasını açın.

Alternatif Metin

işaretli olan;

Panoya Kopyala!

satırını, aşağıdaki satır ile değiştirin.

Panoya Kopyala!

9. npm ile çalıştırın

Çok az kaldı. Terminali tekrar açın. Bunun için VSCode kullanıyorsanız buradaki bash terminali iş görecektir.

Panoya Kopyala!

Artık klasörü kontrol ederseniz tailwindcss sınıfını içeren style.css‘yi görebilirsiniz!

10. Sonra…

Sadece html dosyanızı açın ve style.css’yi html dosyanıza bağlamak için projenizi yapılandırın.

Panoya Kopyala!

 

Hepsi bu kadar. Çılgın projelerinizi bize göndermeyi ihmal etmeyin.

Keyifli Kodlamalar.

Sağlıcakla Kalın.

Paylaşmak İster Misiniz?