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:
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.
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.
4. public ve src klasörlerini oluşturun
Bunun için yine terminalinizde kullanmanız gereken kodlar şunlardır.
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.
ardından “style.css” isimli bir css dosyası oluşturalım.
6. html dosyası oluşturun
Html dosyasını oluşturmak için “public” klasörüne giriş yapacağız.
ardından;
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.
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.
işaretli olan;
satırını, aşağıdaki satır ile değiştirin.
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.
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.
Hepsi bu kadar. Çılgın projelerinizi bize göndermeyi ihmal etmeyin.
Keyifli Kodlamalar.
Sağlıcakla Kalın.