نصب Tailwindcss در Vue3

معرفی Tailwindcss

اگه هنوز با Tailwindcss آشنا نیستید که پیشنهاد میکنم حتما حتما یه وقت بگذارید و هرچه زودتر این فریمورک دسوت داشتنی css رو یادبگیرید.با اطمینان میشه گفت Tailwindcss امروزه جز معروف ترین و محبوب ترین فریمورک های css هستش.کافیه یه سر به داکیومنشنش بزنید و از زیبایی ها و قدرت این فریمورک دوست داشتنی رو ببینید.

نصب Tailwindcss در Vue3

خب برای نصب Tailwindcss ما نیاز به یک پروژه vuejs داریم که میتونید با کمک vue cli ایجاد کنید و من دیگه وققتون رو بابت این موضوع نمیگیرم.بعد از ایجاد یه پروژه vue وارد اون میشیم و داخل فولدر src یا فایل به اسم tailwind.css ایجاد میکنیم و محتویات اون رو مقادیر زیر قرار میدیم:

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

بعد از اون کافیه ترمینال رو باز کنید و دستور زیر رو برای نصب Tailwindcss و postcss رو بزنید:

npm install tailwindcss postcss autoprefixer

ممکنه توی این مرحله به این خطا برخورد کنید:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

خطای بالا به ما میگه که هنوز از PostCSS 8 پشتیبانی نمیکنه که جای نگرانی نداره و شما کافیه دوتا دستور زیر رو بزنید برای رفع این مشکل:دستور اول برا حذف این مواردی هست که نصب کردیم و دستور دوم برای نصب نسخه ای هست که بدون مشکل برای ما کار میکنه:

npm uninstall tailwindcss postcss autoprefixer

و دستور دوم:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

خب الان که با موفقیت Tailwindcss نصب شد کافیه با دستور زیر فایل کانفیگ Tailwindcss و postcss رو ایجاد کنیم:

npx tailwindcss init -p

خب الان کافیه وارد فایل main.js که داخل فولدر src هست بشیم و فایل استایل tailwindcss رو ایمپوت کنیم:

import './tailwind.css'

و در نهایت وارد فایل tailwind.config.js میشیم و قسمت purge رو به این به این شکل تغییر میدیم:

purge:[&quot./src/**/*.vue&quot],

تموم شد خسته نباشید Tailwindcss با موفقیت نصب شد کافیه الان پروژه رو با کمک دستور npm run serve بالا بیارید.

نکته:اگه از node ورژن 17 و یا بالاتر استفاده میکنید ممکنه با خطای digital envelope routines::unsupported - ERR_OSSL_EVP_UNSUPPORTED روبرو بشید که برای رفع این مشکل کافیه وارد فایل package.json بشید و
و قسمت اسکریپت رو به این حالت تغییر بدید:

&quotserve&quot: &quotexport NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve&quot,
&quotbuild&quot: &quotexport NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build&quot,
&quotlint&quot: &quotexport NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint&quot

حالا با خیال راحت و بدون هیچ مشکلی پروژه شما اماده است.

مرسی که وقت ارزشمندتون رو به مطالعه این مقاله اختصاص دادید :)

سوالی داشتید توی کامنت ها بپرسید