نحوه استفاده از Tailwind در Vite

معرفی

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

Vite به عنوان فناوری معرفی شده است که به زمان اجرا و ایجاد یک برنامه React با استفاده از آن کمک می کند create-react-app. به‌عنوان توسعه‌دهنده، ما اغلب از css در طراحی وب‌سایت‌ها استفاده می‌کنیم، اما همانطور که می‌دانیم، اخیراً پیشرفت‌هایی در چارچوب‌های css مانند tailwind صورت گرفته است که به توسعه کارآمد کمک می‌کند.

نصب و راه اندازی

برای شروع، vite باید در ترمینال با استفاده از این نمونه کد شروع شود:

با npm

npm create vite@latest

با نخ

yarn create vite

با PNPM

pnpm create vite

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

npm 6.x

npm create vite@latest my-vue-app --template vue

npm 7+، دو خط تیره اضافی مورد نیاز است:

npm create vite@latest my-vue-app -- --template vue

نخ

yarn create vite my-vue-app --template vue

pnpm

pnpm create vite my-vue-app --template vue

شروع شدن

برای شروع با vite، من همچنین تصاویری را اضافه کرده ام که در پیمایش فرآیند نصب به شرح زیر مفید خواهند بود:

تصویر زیر اولین فرآیند استفاده از vite را نشان می دهد که نام پروژه را به صورت زیر انتخاب می کنید:

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

همچنین می‌توانیم فرآیند انتخاب چارچوب مورد استفاده را به صورت زیر مشاهده کنیم:

پس از انتخاب یک فریم ورک، از کاربر خواسته می شود تا زبان مورد نظر خود را برای استفاده انتخاب کند:

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

در زیر تصویری وجود دارد که پوشه حاوی فایل های ایجاد شده با استفاده از vite را نشان می دهد:

نصب و استفاده از Tailwind

همانطور که قبلا ذکر شد، tailwind یک چارچوب CSS است که برای کمک به تجربه بهتر برای کاربران و همچنین برای توسعه دهنده ایجاد شده است. برای نصب tailwind باید مراحل زیر انجام شود:

Tailwind CSS را نصب کنید

tailwindcss را نصب کنید و سپس خود را تولید کنید tailwind.config.js و postcss.config.js فایل ها به شرح زیر

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

پیکربندی مسیرهای قالب

مرحله بعدی تنظیم مسیرها برای فایل های قالب در خود است tailwind.config.js فایل.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

دستورات Tailwind را به فایل CSS خود اضافه کنید

پس از پیکربندی مسیر، مرحله بعدی اضافه کردن مسیر است @tailwind دستورالعمل برای هر یک از لایه های Tailwind به شما ./src/index.css فایل مطابق شکل:

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

شروع فرآیند ساخت

فرآیند ساخت خود را با استفاده از npm run dev اجرا کنید

npm run dev

از Tailwind در پروژه خود استفاده کنید

سپس می‌توانید از کلاس‌های کاربردی Tailwind برای استایل دادن به محتوای خود استفاده کنید:

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

نتیجه

در پایان، vite و tailwind توسط جامعه توسعه‌دهندگان دریافت شده است و مهم است که توجه داشته باشید که شکایات متعددی در مورد stackoverflow در مورد کار نکردن موارد فوق برای افراد خاص وجود دارد. و اگر متوجه این موضوع شدید، مهم است که مطمئن شوید tailwind.config.js فایل به tailwind.config.cjs همانطور که در تصویر زیر نشان داده شده است.

کد نویسی مبارک!