آموزش نصب Tailwind CSS (تیلویند) با استفاده از Tailwind CLI

3 آبان 1403
837
بدون دیدگاه
میلاد
آخرین بروزرسانی: 7:19 ب.ظ 3 آبان 1403

با سلام خدمت همه دوستان و همراهان همیشگی وب سایت فراز کد:

Tailwind CSS به Node.js وابسته است و برای نصب و مدیریت بسته‌ها به آن نیاز دارد. Node.js همانطور در پست های قبلی مطرح شده است، یک محیط اجرایی برای جاوااسکریپت است که به شما این امکان را می‌دهد تا برنامه‌های جاوااسکریپت را خارج از مرورگر اجرا کنید. به وب‌سایت رسمی nodejs.org بروید و نسخه مناسب برای سیستم‌عامل خود (Windows، macOS یا Linux) را دانلود و نصب کنید.

ایجاد یک پروژه جدید با Tailwind CLI

برای سازمان‌دهی بهتر و مدیریت کدهای خود، معمولاً یک پوشه جدید برای پروژه‌های خود ایجاد می‌کنید. با استفاده از دستور زیر یک پوشه جدید به نام my-project بسازید :

mkdir my-project

با دستور زیر به پوشه جدید وارد شوید :

cd my-project

ایجاد فایل package.json : فایل package.json اطلاعات مربوط به پروژه شما و وابستگی‌های آن را ذخیره می‌کند. با اجرای دستور زیر، یک فایل package.json به‌طور خودکار ایجاد می‌شود:

npm init -y

گزینه -y به npm می‌گوید که به‌طور خودکار تمام تنظیمات پیش‌فرض را قبول کند.

نصب Tailwind CSS

برای استفاده از Tailwind CSS، باید آن را به عنوان یک وابستگی در پروژه خود نصب کنید. با اجرای دستور زیر، Tailwind CSS به عنوان یک وابستگی توسعه در پروژه شما نصب می‌شود:

npm install -D tailwindcss

گزینه -D به npm می‌گوید که این بسته فقط برای توسعه استفاده می‌شود و در تولید نیاز نیست.

ایجاد فایل پیکربندی Tailwind

فایل پیکربندی Tailwind به شما این امکان را می‌دهد که تنظیمات و سفارشی‌سازی‌های مربوط به Tailwind CSS را انجام دهید. با اجرای دستور زیر، یک فایل به نام tailwind.config.js ایجاد می‌شود:

npx tailwindcss init

این فایل شامل تنظیمات پیش‌فرض Tailwind است و می‌توانید آن را برای سفارشی‌سازی کلاس‌های Tailwind و افزونه‌های اضافی ویرایش کنید.

ایجاد فایل CSS

برای استفاده از Tailwind CSS، باید یک فایل CSS ایجاد کنید که شامل دستورات Tailwind باشد. یک فایل جدید به نام styles.css ایجاد کنید و دستورات زیر را به آن اضافه کنید:

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

این دستورات به Tailwind می‌گویند که استایل‌های پایه، کامپوننت‌ها و ابزارهای خود را به این فایل اضافه کند.

tailwind base : با اضافه کردن این directive استایل های پیش فرض تگ ها ازبین می رود.

tailwind components : با اضافه کردن این directive میتوانیم تیلویند را شخص سازی کنیم.

tailwind utilities : با اضافه کردن این directive همه utility هادر فایل css ورودی لود می شود صرفا آن ها که استفاده شده است در فایل خروجی قرار می دهد.

ساخت فایل CSS نهایی

پس از ایجاد فایل CSS، باید آن را به یک فایل نهایی تبدیل کنید که شامل تمام استایل‌های Tailwind باشد. با اجرای دستور زیر، Tailwind CSS فایل نهایی را تولید می‌کند:

npx tailwindcss -i ./styles.css -o ./dist/output.css --watch

-i ./styles.css: مشخص می‌کند که فایل ورودی کدام است.
-o ./dist/output.css: مشخص می‌کند که فایل خروجی کجا ذخیره شود. (اگر پوشه dist وجود نداشته باشد، باید آن را ایجاد کنید.)
--watch: این گزینه باعث می‌شود که Tailwind به تغییرات در فایل‌های CSS نظارت کند و به‌طور خودکار فایل خروجی را به‌روزرسانی کند.

استفاده از Tailwind CSS در HTML

حالا که فایل CSS نهایی را تولید کرده‌اید، می‌توانید از آن در فایل HTML خود استفاده کنید. یک فایل HTML جدید (مثلاً index.html) ایجاد کنید و کد زیر را به آن اضافه کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./dist/output.css" rel="stylesheet">
    <title>My Tailwind Project</title>
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        سلام دنیا!
    </h1>
</body>
</html>

در این کد، تگ <link> فایل CSS تولید شده را به صفحه HTML متصل می‌کند.

سپس می‌توانید از کلاس‌های Tailwind CSS مانند text-3xl و font-bold برای طراحی متن استفاده کنید.

نصب Tailwind CSS در React

برای نصب و استفاده از Tailwind CSS در پروژه‌های React، می‌توانید مراحل زیر را دنبال کنید. این کار به شما امکان می‌دهد از امکانات سبک‌دهی پیشرفته‌ی Tailwind CSS در پروژه React خود بهره ببرید. اگر پروژه React آماده ندارید، ابتدا باید یک پروژه جدید ایجاد کنید.

ایجاد پروژه React

npx create-react-app my-app
cd my-app

نصب Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تنظیم فایل tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

برای اضافه کردن Tailwind به CSS، در فایل src/index.css، دستورات زیر را اضافه کنید:

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

اجرای پروژه

npm start

نصب Tailwind CSS در Vue.js

برای نصب و استفاده از Tailwind CSS در پروژه‌های Vue.js، می‌توانید از روش‌های مختلفی استفاده کنید. اگر پروژه Vue.js از قبل ندارید، می‌توانید با استفاده از Vue CLI یک پروژه جدید ایجاد کنید.

ایجاد پروژه Vue

vue create my-vue-app
cd my-vue-app

نصب Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تنظیم فایل tailwind.config.js

module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

برای اضافه کردن Tailwind به CSS در فایل src/assets/css/tailwind.css، دستورات زیر را اضافه کنید:

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

وارد کردن CSS در main.js

import './assets/css/tailwind.css';

اجرای پروژه

npm run serve

نصب Tailwind CSS در Angular

برای نصب و استفاده از Tailwind CSS در یک پروژه Angular، باید مراحل زیر را دنبال کنید. این مراحل شامل نصب Tailwind CSS، تنظیمات پیکربندی، و آماده‌سازی برای استفاده در کامپوننت‌ها است. اگر هنوز پروژه Angular ندارید، ابتدا با استفاده از Angular CLI یک پروژه جدید ایجاد کنید. اگر Angular CLI را نصب نکرده‌اید، آن را نصب کنید.

ایجاد پروژه Angular

ng new my-angular-app
cd my-angular-app

نصب Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تنظیم فایل tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

برای اضافه کردن Tailwind به CSS در فایل src/styles.css، دستورات زیر را اضافه کنید

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

اجرای پروژه

ng serve

نصب Tailwind CSS در Svelte

برای نصب و استفاده از Tailwind CSS در پروژه Svelte، مراحل زیر را دنبال کنید. این مراحل شامل نصب Tailwind CSS، پیکربندی آن، و تنظیمات مربوط به PostCSS است تا بتوانید به‌راحتی از کلاس‌های Tailwind در پروژه Svelte خود استفاده کنید. ابتدا، اگر هنوز پروژه Svelte ندارید، می‌توانید یک پروژه جدید با استفاده از قالب رسمی Svelte ایجاد کنید.

ایجاد پروژه Svelte

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install

نصب Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تنظیم فایل tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,svelte,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

برای اضافه کردن Tailwind به CSS در فایل src/global.css، دستورات زیر را اضافه کنید

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

وارد کردن CSS در main.js

import './global.css';

اجرای پروژه

npm run dev

ویدیو آموزش نصب Tailwind CSS با استفاده از Tailwind CLI :

آنچه در این مطلب میخوانید !

هیچ داده ای یافت نشد

آموزش نصب Tailwind CSS (تیلویند) با استفاده از Tailwind CLI

ایجاد یک پروژه جدید با Tailwind CLI

نصب Tailwind CSS

ایجاد فایل پیکربندی Tailwind

ایجاد فایل CSS

ساخت فایل CSS نهایی

استفاده از Tailwind CSS در HTML

نصب Tailwind CSS در React

نصب Tailwind CSS در Vue.js

نصب Tailwind CSS در Angular

نصب Tailwind CSS در Svelte

دیدگاهتان را بنویسید لغو پاسخ