فرانت اند کده | FrontEndKadeh | دانلود قالب سایت، پلاگین جاوا اسکریپت، کامپوننت های آماده | دانلود رایگان فیچرها و کامپوننتها برای طراحی سایت
تو این مقاله می‌خوام آموزش نصب دو فریمورک(Framework) محبوب دنیای فرانت رو به شما یاد بدم، یعنی نصب فریمورک tailwind ورژن 4 , vuejs .
خیلی از توسعه دهندگان سمت کاربر از دو فریمورک به صورت همزمان استفاده می‌کنند، خب تا موقعی که ورژن 3 فریمورک Tailwind بود، به راحتی توی مستندات نصب فریمورک‌های سایت tailwind می‌توانستیم طریقه نصب این دو رو پیدا کنیم، و به صورت همزمان از هر دو در یک پروژه استفاده کنیم.
اما با آمدن ورژن جدید فریمورک tailwind یه مشکل کوچیکی توی نصب این فریمورک بوجود آمد، البته تا این لحظه هنوز رفع نشده است.
شرح مشکل در نصب این tailwindCSS , VueJs با Vite
وقتی دستور ساخت فایل کانفیگ tailwind و postcss رو اجرا میکنیم ، خطایی به ما نشان می‌دهد و این دو مورد رو فراخوانی نمی‌کنه. (البته برای من پیش آمده است) توی اینترنت هم هر چه قدر جستجو کردم چیزی پیدا نمی‌کردم از chatgpt هم که سوال می‌کردم فقط همون مستندات ورژن 3 رو برام بازنویسی می‌کرد.
اگر می‌خواهید ذهنی آماده برای حل مسالئل ساده و پیچیده جاوا اسکریپت داشته باشید پیشنهاد می‌کنم مقاله چگونه در حل مساله قوی شویم رو مطالعه فرمایید.
اما خب جوینده یابنده است 🙂
بریم سراغ نصب این دو فریمورک یعنی tailwindcss ورژن 4 و vuejs از طریق vite :
خب قبل از شروع این موضوع رو بیان کنم که من با نرم افزار vscode کدنویسی‌هامو انجام می‌دم و این نصب هم در همین فضای vscode آموزش داده خواهد شد.
1- ابتدا باید Vite و VueJs رو نصب کنیم که با دستور زیر در ترمینال برنامه vsCode این دو مورد رو فراخوانی میکنیم:
npm create vite@latest my-vue-project --template vue
به جای ” my-vue-project ” می‌توانیم نام پروژه رو به صورت دلخواه قرار بدیم.
2- بعد از اجرای دستور فوق وارد دایرکتوری پروژه میشیم و دستور زیر رو در ترمینال اجرا میکنیم:
برای وارد شدن به دایرکتوری از کد
cd projectName
استفاده میکنیم، که در واقع projectName همون نام پروژه هست.
خب وقتی با کد فوق وارد دایرکتوری پروژه شدیم، نوبت نصب فریمورک تیلویند ورژن 4 به همراه autoprefixer , postcss هست، که با فرمان زیر این اتفاق خواهد افتاد:
npm install -D tailwindcss@4 autoprefixer postcss
خب بعد از نصب موارد بالا، حالا نوبت فراخوانی فایل vonfig tailwind هست منتهی چون با دستور npm init -y در ورژن 4 تیلویند بهمون خطا میده، مجبوریم به صورت دستی پیاده سازی بکنیم، که برای این کار ابتدا در ریشه اصلی پروژه یه فایل با کد زیر ایجاد میکنیم:
tailwind.config.js
و بعد درون کد اون فایل کدهای زیر رو قرار می‌دهیم:
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
3- در مرحله سوم باید پکیج TilwindCSS / Vite رو نصب کنیم که از طریق دستور زیر در ترمینال این کار رو انجام می‌دهیم:
npm install @tailwindcss/vite
و سپس وارد فابل vite.config می‌شویم و تمامی کدهای اون رو پاک میکنیم و بجای آنها کدهای زیر رو جایگزین میکنیم:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwind from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), tailwind()],
})
وقتی این موارد رو انجام دادیم باید دوباره Tailwind , postcss رو به صورت package نصب کنیم که برای این کار دستور زیر رو درون ترمینال درج میکنیم:
npm install @tailwindcss/postcss
حالا باید مطمئن شویم که اجزای نصبی این دو مورد فوق که قبلا نصب کرده‌ایم به صورت کامل حذف شوند. برای این مورد نیز دو دستور زیر رو درون ترمینال درج می‌کنی :
npm uninstall tailwindcss
npm uninstall postcss
حالا باید فایل کانفینگ postcss رو به صورت دستی ایجاد کنیم. که در ابتدا فایلش رو با عنوان زیر ایجاد میکنیم:
postcss.config.cjs
و سپس درون اون فایل کدهای زیر رو قرار می‌هیم :
module.exports = {
plugins: [
require('@tailwindcss/postcss'), // استفاده از Tailwind به‌عنوان PostCSS plugin
require('autoprefixer'),
],
}
خب کار ما تقریبا تمام شده فقط نیاز هست که کلاس‌های تیلویند رو هم فراخوانی کنیم، در ورژن 3 تیلویند باید utility ,base و components رو درون فایل style.css مسیر src قرار می‌دادیم، ولی در ورژن 4 فریمورکTailwindCSS فقط کافی هست کد زیر رو درون فایل CSS قرار دهیم :
@import "tailwindcss";
و در مرحله آخر باید پروژه رو run کنیم، که با دستور زیر در ترمینال vsCode این اتفاق خواهد افتاد :
npm run dev
خب امیدوارم این مقاله برای شما مفید بوده، اگر در حین نصب این دو Framework و مراحل فوق مشکلی برای شما بوجود آمد حتما در قسمت نظرات درج کنید که مشکل شما رو حل کنیم.
