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:

node -v
npm -v

1 2	node -v npm -v

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.

npm init -y
npm install -D tailwindcss
npx tailwindcss init

npm init -y

npm install -D tailwindcss

npx tailwindcss init

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.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ["./dist/*.{html,js}"],

theme: {

extend: {},

plugins: [],

}

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.

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;

@tailwind components;

@tailwind utilities;

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.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

Hello world!

</h1>

</body>

</html>

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.

npx tailwindcss -i ./src/input.css -o ./dist/style.css --watch

1	npx tailwindcss -i ./src/input.css -o ./dist/style.css --watch

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.

  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/style.css",
    "watch": "tailwindcss -i ./src/input.css -o ./dist/style.css --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

"scripts": {

"build": "tailwindcss -i ./src/input.css -o ./dist/style.css",

"watch": "tailwindcss -i ./src/input.css -o ./dist/style.css --watch",

"test": "echo \"Error: no test specified\" && exit 1"

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.

npm run watch

1	npm run watch

Kaynak kodları indirmek için TIKLAYINIZ

Bunu beğen:

İlgili

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et

TailwindCss Kurulum

Bunu paylaş:

Bunu beğen:

İlgili

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et