تخفیف ویژه برای همه دوره‌ها از شنبه

آموزش پیکربندی Tailwind CSS در پروژه

سودا مجتهدی
تیر 31, 1403

Tailwind CSS یک فریم‌ورک utility-first برای CSS است. این فریم‌ورک با سایر فریم‌ورک‌های CSS مانند Bootstrap یا Foundation متفاوت است زیرا یک UI kit نمی‌باشد. فریم‌ورک tailwind CSS کامپوننت‌های از پیش ساخته شده مانند buttonها، cardها و غیره ندارد. در عوض، کلاس‌های utility سطح پایینی را ارائه می‌کند که به ما این امکان را می‌دهد تا بتوانیم طرح‌های کاملاً سفارشی خود را، بدون این که نیاز باشد فایل HTML را ترک کنیم، بسازیم. همین ویژگی به ما کمک می‌کند تا بتوانیم طرح‌هایی را بسازیم که منحصربه‌فرد برای پروژه ما هستند.

در این مقاله قصد داریم تا یک پروژه Tailwind CSS را از ابتدا راه‌اندازی کنیم. این یک الگوی اولیه است که می‌توانیم برای هر پروژه‌ای از آن استفاده کنیم.

چندین روش برای شروع استفاده از Tailwind وجود دارد که عبارتند از:

  • لینک CDN
  • Tailwind CLI
  • پلاگین PostCSS

ما در این مقاله از روش دوم، یعنی Tailwind CLI استفاده خواهیم کرد. زیرا انعطاف‌پذیری بالایی دارد و می‌توانیم از آن در هر پروژه‌ای بهره‌مند شویم.

ساخت یک پروژه

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init -y
npm init -y
npm init -y

با این کار یک فایل

package.json
package.json برای ما ایجاد می‌شود. پس از آن، باید Tailwind را نصب کنیم. به همین منظور، دستور زیر را اجرا می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -D tailwindcss
npm install -D tailwindcss
npm install -D tailwindcss

ما Tailwind را به عنوان یک dev dependency نصب کردیم، زیرا می‌خواهیم از آن برای ساخت فایل CSS خود استفاده نماییم.

سپس، باید یک فایل

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx tailwindcss init
npx tailwindcss init
npx tailwindcss init

پیکربندی مسیرهای Template

فایل

tailwind.config.js
tailwind.config.js خود را باز کرده و کد زیر را به آن اضافه می‌نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
module.exports = {
content: ['./*.html'],
theme: {
extend: {},
},
plugins: [],
};
module.exports = { content: ['./*.html'], theme: { extend: {}, }, plugins: [], };
module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

این کد به Tailwind می‌گوید که کجا به دنبال فایل‌های HTML ما بگردد. در این مورد، به آن می‌گوییم که هر فایل HTML را در دایرکتوری root جستجو کند. اگر فایل‌های HTML را در دایرکتوری دیگری داریم، می‌توانیم آن را برای مطابقت با تنظیمات خود تغییر دهیم.

وارد کردن CSS

در مرحله بعد، باید یک فایل CSS ایجاد کنیم که ورودی Tailwind باشد. یک فایل به نام

src/input.css
src/input.css ایجاد کرده و دستورات زیر را در آن قرار می‌دهیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base; @tailwind components; @tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;

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

اسکریپت‌های NPM

ما قصد داریم از Tailwind CLI برای ساخت فایل CSS خود استفاده کنیم. فایل

package.json
package.json خود را باز کرده و اسکریپت‌های زیر را به آن اضافه می‌نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"scripts": {
"watch": "tailwindcss -i ./input.css -o ./css/style.css --watch",
"build": "tailwindcss -i ./input.css -o ./css/style.css"
},
"scripts": { "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch", "build": "tailwindcss -i ./input.css -o ./css/style.css" },
"scripts": {
   "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch",
   "build": "tailwindcss -i ./input.css -o ./css/style.css"
 },

اسکریپت

watch
watch فایل
input.css
input.css را که فایل Tailwind CSS ما است، تماشا می‌کند و هر زمان که تغییراتی در پروژه ایجاد می‌کنیم، آن را build می‌کند. اسکریپت
build
build یک بار فایل CSS ما را می‌سازد. وقتی که در حال توسعه پروژه خود هستیم، می‌خواهیم اسکریپت
watch
watch را اجرا کنیم. برای این که production را build کنیم لازم است که اسکریپت
build
build را اجرا نماییم. سپس خروجی در فایل
css/style.css
css/style.css ذخیره خواهد شد. البته در صورت تمایل می‌توانیم از اسم‌های دیگری برای نام‌گذاری فایل‌ها استفاده کنیم. ما مجبور نیستیم که پوشه css یا فایل
style.css
style.css را بسازیم زیرا آن‌ها به صورت خودکار هنگام اجرای اسکریپت‌ها ایجاد می‌شوند.

فایل HTML

اکنون باید یک فایل HTML بسازیم تا تنظیمات خود را در آن آزمایش کنیم. یک فایل به نام

index.html
index.html ایجاد کرده و کد زیر را به آن اضافه می‌نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>Simple Tailwind Starter</title>
</head>
<body>
<h1 class="text-4xl mb-4">Welcome</h1>
<p>Start building your Tailwind project</p>
</body>
</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" /> <link rel="stylesheet" href="css/style.css" /> <title>Simple Tailwind Starter</title> </head> <body> <h1 class="text-4xl mb-4">Welcome</h1> <p>Start building your Tailwind project</p> </body> </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" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Simple Tailwind Starter</title>
  </head>
  <body>
    <h1 class="text-4xl mb-4">Welcome</h1>
    <p>Start building your Tailwind project</p>
  </body>
</html>

باید به این نکته توجه داشته باشیم که ما از فایل

css/style.css
css/style.css که در مرحله قبل ایجاد کردیم، استفاده می‌کنیم.

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm run watch
npm run watch
npm run watch

این دستور باید فایل

css/style.css
css/style.css ما را ایجاد کند. حالا
index.html
index.html خود را باز می‌کنیم. پیشنهاد می‌شود که از VS Code با Live Server استفاده نماییم، زیرا با ایجاد تغییرات، مرورگر ما به‌طور خودکار لود می‌شود و ما می‌توانیم تغییرات را مشاهده کنیم.

برای متوقف کردن سرور توسعه Tailwind خود،

C
C +
CTRL
CTRL را در ترمینال فشار می‌دهیم.

افزودن فایل
.gitignore
.gitignore

اگر از Git استفاده می‌کنیم، در این بخش قصد داریم تا یک فایل

.gitignore
.gitignore را به پروژه خود اضافه نماییم. این کار از اضافه شدن پوشه
node_modules
node_modules به repository ما جلوگیری می‌کند. یک فایل به نام
.gitignore
.gitignore می‌سازیم و کد زیر را اضافه می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
node_modules
node_modules
node_modules

اکنون می‌توانیم Git repository خود را مقداردهی اولیه کنیم و پروژه خود را به GitHub اضافه نماییم و به سادگی آن را clone کرده و

npm install
npm install را اجرا کنیم تا dependencyهای خود را هر زمان که می‌خواهیم یک پروژه جدید شروع کنیم، نصب نماییم.

دیدگاه‌ها:

افزودن دیدگاه جدید