Çözüldü Tailwind CSS başarılı bir şekilde kurulmasına rağmen çalışmıyor

Black Swordsman · 13 Nisan 2023

Merhabalar. Tailwind CSS öğrenmek için bu gün kurulumunu gerçekleştirdim. Fakat kurulum sorunsuz bir şekilde gerçekleşmesine rağmen yazdığım kodlar çalışmıyor. Sebebi hakkında bir fikrim yok, yardımcı olursanız sevinirim.

HTML:

<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div>
        <div>
            <h1 class="text-3xl">
                Merhaba Technopat!
            </h1>
        </div>
    </div>
</body>
</html>

"h1" kısmına class belirleyip fontu 3xl yapmayı denemek istedim ama kodu çalıştırdığımda tarayıcı çıktısı CSS olmadan geldi.

kaan.w · 13 Nisan 2023

Şimdilik direkt CDN üzerinden kullanabilirsiniz.

HTML:

<!DOCTYPE html>
<html lang="en">
  <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" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Tailwind</title>
  </head>
  <body>
    <h1 class="text-9xl">Merhaba</h1>
  </body>
</html>

Benim tavsiyem Vitejs üzerinden vanilla javascript projesi oluşturup tailwind kurduktan sonra npm run dev komutu ile çalıştırmanız.

Install Tailwind CSS with Vite - Tailwind CSS

Setting up Tailwind CSS in a Vite project.

tailwindcss.com

Bash:

npm create vite@latest try-tailwind -- --template vanilla

Black Swordsman · 13 Nisan 2023

@kaan.w Hocam öncelikle teşekkür ederim, atmış olduğunuz kod bloğu ile istediğim kodu çalıştırabildim. Bu CDN dediğiniz tam olarak nedir?

kaan.w · 13 Nisan 2023

Black Swordsman dedi:
@kaan.w Hocam öncelikle teşekkür ederim, atmış olduğunuz kod bloğu ile istediğim kodu çalıştırabildim. Bu CDN dediğiniz tam olarak nedir?

İçerik dağıtım ağı olarak geçiyor. Herhangi birşey indirmeden internet üzerinden tailwind için gerekli class vs. çekmiş oluyoruz. Biz burada bu şekilde kullandık, detaylı bilgi için google'dan kaynaklara bakabilirsin.

Black Swordsman · 13 Nisan 2023

kaan.w dedi:
İçerik dağıtım ağı olarak geçiyor. Herhangi birşey indirmeden internet üzerinden tailwind için gerekli class vs. çekmiş oluyoruz. Biz burada bu şekilde kullandık, detaylı bilgi için google'dan kaynaklara bakabilirsin.

Bu şekilde kullanmanın bir dezavantajı var mı hocam?

kaan.w · 13 Nisan 2023

Black Swordsman dedi:
Bu şekilde kullanmanın bir dezavantajı var mı hocam?

Tailwind resmi sitesinde production için önerilmediği yazılmış sadece. Öğrenmek için kullanabilirsiniz bir dezavantajı olmaz.

Black Swordsman · 13 Nisan 2023

@kaan.w Hocam bir sorum daha olacaktı. Tailwind CSS kullanırken aynı zamanda normal CSS kullanabilir miyim?

298784 · 13 Nisan 2023

Black Swordsman dedi:
@kaan.w Hocam bir sorum daha olacaktı. Tailwind CSS kullanırken aynı zamanda normal CSS kullanabilir miyim?

Tabii ki kullanabilirsiniz. Kullandığınız classname Tailwind ile çakışmıyorsa bir sorun çıkarmaz. Ayrıca arkadaşın attığı CDN'i önermiyorum. VSC üzerinden tailwind live compiler kullanırsanız dosyada bir değişiklik yaptığınızda otomatik olarak bir dosyaya tailwindi hazırlayacak şekilde kullanmalısınız.

kaan.w · 13 Nisan 2023

Black Swordsman dedi:
@kaan.w Hocam bir sorum daha olacaktı. Tailwind CSS kullanırken aynı zamanda normal CSS kullanabilir miyim?

Kullanabilirsin. @apply, @layer gibi direktifler var. Mesela çok tekrar ettiğin birden fazla tailwind sınıfı var ise tek bir sınıf içerisinde toplayıp kullanabiliyorsun.

CSS:

.custom-number-input {
  @apply justify-center items-center flex w-12 border-black border-opacity-20;
}

298784 dedi:
Tabii ki kullanabilirsiniz. Kullandığınız classname Tailwind ile çakışmıyorsa bir sorun çıkarmaz. Ayrıca arkadaşın attığı CDN'i önermiyorum. VSC üzerinden tailwind live compiler kullanırsanız dosyada bir değişiklik yaptığınızda otomatik olarak bir dosyaya tailwindi hazırlayacak şekilde kullanmalısınız.

Öğrenme aşamasında olduğu için CDN kullanmasında bir sakınca yok. Önerilen yolu da yazdım zaten Vitejs projesi üzerine kurmak saf HTML CSS üzerine kurmaktan daha kolay.

@Black Swordsman bu arada Tailwind Intellisense paketi yüklü değilse yükle VSC içerisinden. Recommended settings kısmında birkaç ayar var onları da istersen yapabilirsin.

Çözüldü Tailwind CSS başarılı bir şekilde kurulmasına rağmen çalışmıyor

Ayrıntılı düzenleme

Black Swordsman

Kilopat

kaan.w

Install Tailwind CSS with Vite - Tailwind CSS

kaan.w

Megapat

Install Tailwind CSS with Vite - Tailwind CSS

Black Swordsman

Kilopat

kaan.w

Megapat

Black Swordsman

Kilopat

kaan.w

Megapat

Black Swordsman

Kilopat

298784

Kilopat

kaan.w

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz