Tailwind CSS - وب سایت های مدرن را سریع بدون ترک HTML خود بسازید

طرح های پیچیده را با سهولت ایجاد کنید

با Tailwind CSS، ایجاد طرح های پیچیده به یک نسیم تبدیل می شود. ترکیبی از کلاس‌های کاربردی و ابزارهای طراحی واکنش‌گرا به شما این امکان را می‌دهد که طرح‌بندی‌های پیچیده را به راحتی طراحی کنید، بدون اینکه به عملکرد و قابلیت نگهداری وب‌سایت خود آسیبی وارد کنید.

ساخت هرچیزی

زیبایی Tailwind CSS در تطبیق پذیری آن نهفته است. شما می توانید هر چیزی را از یک صفحه وبلاگ ساده گرفته تا یک پلتفرم تجارت الکترونیکی پیشرفته ایجاد کنید، همگی در حالی که از کلاس های کاربردی بصری استفاده می کنند.

شما فقط توسط تخیل خود محدود شده اید. تفاوت اصلی با استفاده از Vanilla CSS سرعتی است که در آن می توانید طرح های سفارشی بسازید.

رویکرد سنتی استفاده از کلاس‌های css سفارشی با اجزای html مانند div، کلاس div، کلاس p همیشه یک گزینه است، اما بهبود سرعتی که با Tailwind CSS ارائه می‌شود، زندگی شما را آسان‌تر می‌کند.

بهترین شیوه ها در واقع کار نمی کنند

به طور سنتی، CSS با ایجاد مجموعه‌ای از سبک‌های جهانی و اصلاح آن‌ها بر اساس جزء به جزء نوشته می‌شود. اگرچه این یک روش محبوب است، اما می‌تواند منجر به ایجاد کدهای حجیم و سخت شود.

Tailwind CSS این مفهوم را به چالش می‌کشد و استدلال می‌کند که CSS اولین ابزار راه‌حل تمیزتر و قابل نگهداری‌تری ارائه می‌دهد.

محبوب ترین کتابخانه مؤلفه برای Tailwind CSS

daisyUI محبوب ترین کتابخانه کامپوننت برای Tailwind CSS است که دارای بیش از 50 مؤلفه از پیش طراحی شده، بیش از 500 کلاس کاربردی و تقریباً امکانات بی پایان است. این شما را از اختراع مجدد چرخ هر بار که یک پروژه جدید ایجاد می کنید، نجات می دهد.

هر بار چرخ را دوباره اختراع نکنید

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

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

Tailwind CSS - فریم ورک Utility First CSS

در هسته خود، Tailwind CSS یک فریم ورک CSS برای اولین بار است. این بدان معناست که کلاس‌های کاربردی سطح پایین و قابل ترکیبی را ارائه می‌کند که می‌توانید از آنها برای ایجاد هر طرحی، مستقیماً در HTML خود استفاده کنید. دیگر خبری از فایل‌های CSS بی‌پایان نیست، فقط کد ساده و بصری.

از نام های کلاس های معنایی استفاده کنید

نام کلاس های معنایی خوانایی کد شما را بهبود می بخشد و درک آنچه یک کلاس خاص فقط با نگاه کردن به نام آن انجام می دهد آسان تر می کند. این یکی از بسیاری از ویژگی هایی است که Tailwind CSS برای بهبود تجربه توسعه دهنده اتخاذ کرده است.

CSS خالص. Framework Agnostic. همه جا کار می کند

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

مزایای Tailwind CSS

مزایای استفاده از Tailwind CSS شامل افزایش بهره‌وری، کاهش اندازه فایل CSS و تجربه توسعه‌دهنده بهبودیافته به دلیل متدولوژی ابزار اول است. علاوه بر این، حالت Just-In-Time (JIT) زمان ساخت سریعی را ارائه می دهد و روند توسعه شما را سرعت می بخشد.

Tailwind CSS قیمت گذاری

Tailwind CSS یک پروژه منبع باز است، به این معنی که استفاده از آن کاملا رایگان است. این هزینه زمانی است که بخواهید به ویژگی‌های ممتاز مانند مؤلفه‌های UI و قالب‌ها دسترسی داشته باشید که از طریق Tailwind UI ارائه می‌شوند.

این عقیده و در عین حال انعطاف پذیر است

Tailwind CSS نظر محکمی در مورد نحوه ساختار CSS شما ارائه می دهد، اما به اندازه کافی انعطاف پذیر است تا امکان سفارشی سازی را فراهم کند. این تعادل شما را قادر می‌سازد بر روی آنچه که مهم‌تر است تمرکز کنید - ایجاد رابط‌های کاربری زیبا.

ویژگی های مدرن

Tailwind CSS ویژگی‌های مدرنی مانند Flexbox، Grid و ویژگی‌های سفارشی را در بر می‌گیرد و آن را به گزینه‌ای عالی برای توسعه برنامه‌های کاربردی وب مدرن تبدیل می‌کند.

پیش نیازهای استفاده از Tailwind CSS

قبل از شروع استفاده از Tailwind CSS، به درک اولیه HTML و CSS نیاز دارید.

زمان استفاده از Tailwind CSS

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

وارد چارچوب های کامپوننت نیستید؟

اگر طرفدار فریمورک های کامپوننت مانند React یا Vue نیستید، جای نگرانی نیست. Tailwind CSS یک چارچوب آگنوستیک است و می تواند با HTML خالص و جاوا اسکریپت استفاده شود.

شباهت ها و تفاوت های بین Tailwind CSS و سایر چارچوب های CSS

در حالی که سایر فریم ورک‌ها مانند Bootstrap و Foundation اجزای از پیش طراحی شده را ارائه می‌دهند، Tailwind CSS ابزارهایی را در اختیار شما قرار می‌دهد تا بدون ترک HTML، طرح‌های کاملاً سفارشی بسازید. با این حال، با ادغام کتابخانه های مؤلفه مانند daisyUI، اکنون می توانید از بهترین های هر دو دنیا لذت ببرید.

حالت تاریک

یکی از جدیدترین ویژگی‌های Tailwind CSS و daisyUI حالت تاریک است که به شما امکان می‌دهد وب‌سایت‌هایی با مضمون تاریک بدون زحمت ایجاد کنید.

مثال فلکس باکس

Tailwind CSS به خوبی با ویژگی های CSS مدرن مانند Flexbox ادغام می شود. برای مثال، می‌توانید با استفاده از کلاس‌هایی مانند flex، justify-centre، items-center و غیره یک طرح‌بندی واکنش‌گرا ایجاد کنید.

با ترکیب Just-in-Time، می توانید مقادیر مختلف کلاس کاربردی را به راحتی امتحان کنید. اگر یک کلاس ابزار کار نمی کرد، به سادگی آن را تغییر دهید تا عنصر خود را سفارشی کنید.

نمونه طرح بندی Flexbox

با استفاده از Tailwind CSS، ایجاد طرح‌بندی‌های پیچیده مانند نوار ناوبری پاسخگو آسان است. در اینجا یک مثال است:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

اجزای آماده

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

چگونه CSS را به Tailwind CSS تبدیل کنیم

توانایی تبدیل CSS به کلاس های Tailwind CSS چیزی است که اکثر توسعه دهندگان به آن نیاز دارند. وب سایت های زیادی در اینترنت وجود دارند که قبل از وجود Tailwind CSS ساخته شده اند. این صفحات وب از css با شیوه نامه استفاده می کنند و متخصصان توسعه وب می خواهند این صفحات را به Tailwind CSS منتقل کنند.

DivMagic یک ابزار توسعه وب است که برای توسعه دهندگان وب و توسعه دهندگان نرم افزار ساخته شده است. این اجازه می دهد تا هر سبکی از css وانیلی به Tailwind CSS کپی شود. با یک کلیک می توانید هر کامپوننت موجود در اینترنت را به Tailwind CSS تبدیل کنید و از Tailwind در پروژه خود استفاده کنید و سبک را به هر شکلی که می خواهید سفارشی کنید.

در فلسفه CSS Tailwind عمیق شوید

فلسفه پشت Tailwind CSS تمرکز بر ابزار است. این بدان معناست که به‌جای تعریف کلاس‌های مؤلفه، Tailwind CSS کلاس‌های کاربردی سطح پایینی را ارائه می‌کند که به شما امکان می‌دهد بدون ترک HTML، طرح‌های منحصربه‌فردی بسازید.

چرا از CSS سنتی فاصله بگیریم؟

CSS سنتی ممکن است باعث استفاده بیش از حد از override ها، فایل های متورم و "div soup" شود. با جابجایی به یک فریم ورک CSS اول ابزار مانند Tailwind CSS، می‌توانید این مشکلات را کاهش دهید و در نتیجه یک پایگاه کد تمیزتر و کارآمدتر ایجاد کنید.

کلاس های Power of Utility را تجربه کنید

کلاس‌های کاربردی به شما کمک می‌کنند تا از تکرار سبک‌های مشابه در برگه‌های سبک خود اجتناب کنید. این یک اصل "خودت را تکرار نکن" (DRY) است. این کلاس ها باعث صرفه جویی قابل توجهی در زمان و تلاش شما می شود و منجر به ایجاد یک پایگاه کد بسیار قابل نگهداری می شود.

کاوش دستورالعمل‌های Tailwind CSS

Tailwind CSS چند دستور العمل را معرفی می کند که می توانند در شیوه نامه شما استفاده شوند. اینها عبارتند از @apply، @variants و @screen. درک و استفاده از این دستورالعمل ها می تواند تجربه Tailwind CSS شما را تا حد زیادی افزایش دهد. اینها را می توان در فایل CSS Config Tailwind قرار داد. با استفاده از این روش می توانید کلاس های css بنویسید.

Tailwind CSS را با افزونه ها گسترش دهید

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

Tailwind CSS را در گردش کار خود بگنجانید

ادغام Tailwind CSS در گردش کار توسعه شما ساده است، چه از ابزارهای ساخت مانند Webpack یا Parcel استفاده کنید یا با چارچوب هایی مانند Next.js یا Gatsby کار کنید.

افزایش دسترسی با Tailwind CSS

Tailwind CSS طراحی قابل دسترس را با گنجاندن طیف وسیعی از ویژگی‌های ARIA در کلاس‌های خود تشویق می‌کند. رابط های در دسترس تری ایجاد کنید و تجربه کاربری را برای همه بهبود بخشید.

با Tailwind CSS از قدرت Flexbox و Grid استفاده کنید

از ماژول های چیدمان CSS مدرن مانند Flexbox و Grid با Tailwind CSS استفاده کنید. بیاموزید که چگونه می توان از کلاس های ابزار برای کنترل طرح بندی به شیوه ای انعطاف پذیر و پاسخگو استفاده کرد.

چگونه پروژه های Tailwind CSS خود را اشکال زدایی کنیم

Tailwind CSS چندین ابزار و تکنیک های اشکال زدایی را ارائه می دهد که شناسایی و حل مسائل استایل را آسان تر می کند. این ابزارها را درک کنید و مهارت های اشکال زدایی خود را افزایش دهید.

یک وب رنگارنگ با Tailwind CSS ایجاد کنید

Tailwind CSS با پالت گسترده ای از رنگ های قابل تنظیم ارائه می شود. بیاموزید که چگونه از این رنگ ها برای ایجاد طرح های پر جنب و جوش و از نظر بصری جذاب استفاده کنید.

با حالت JIT Tailwind CSS سریعتر توسعه دهید

در حالت Just-In-Time Tailwind CSS عمیق تر شوید. بدانید که چگونه کار می کند و چگونه می تواند به طور قابل توجهی سرعت توسعه و زمان ساخت شما را افزایش دهد.

از صفر تا قهرمان: Master Tailwind CSS

سفری را برای تسلط بر Tailwind CSS آغاز کنید. از تنظیم محیط خود تا کاوش در موضوعات پیشرفته، این راهنمای جامع شما را پوشش داده است.

Tailwind CSS را مطابق با نیازهای خود سفارشی کنید

یکی از بزرگترین نقاط قوت Tailwind CSS انعطاف پذیری آن است. یاد بگیرید که چگونه Tailwind را مطابق با نیازهای خاص پروژه خود سفارشی کنید.

کار با Tailwind CSS

از طریق یک سری مثال های عملی درگیر یادگیری عملی شوید. نحوه ساخت انواع اجزای وب با استفاده از Tailwind CSS و DaisyUI را بررسی کنید.

مهاجرت از سایر چارچوب های CSS به Tailwind CSS

آیا در حال تغییر به Tailwind CSS هستید؟ تفاوت های کلیدی بین Tailwind و سایر چارچوب ها را درک کنید و استراتژی های موثر برای مهاجرت پروژه های خود را بیاموزید.

می توانید از DivMagic یا ابزارهای مشابه برای افزایش قابل توجه سرعت مهاجرت خود استفاده کنید.

ابزارهای توسعه وب مانند DivMagic به شما این امکان را می دهند که با یک کلیک هر عنصری از هر طراحی و هر سبکی را از هر وب سایتی کپی کنید.

یک مثال ساده: ساخت کامپوننت کارت پاسخگو

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

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

ساخت فرم با Tailwind CSS

ایجاد فرم با Tailwind CSS ساده و شهودی است. در اینجا یک فرم تماس ساده وجود دارد:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

سفارشی سازی Tailwind CSS

Tailwind CSS به شما این امکان را می دهد که پیکربندی پیش فرض خود را سفارشی کنید و کلاس های کاربردی را مطابق با نیازهای خود تنظیم کنید. در زیر نمونه ای از نحوه سفارشی کردن پالت رنگ وجود دارد.

این مثال‌ها انعطاف‌پذیری و سادگی Tailwind CSS را نشان می‌دهند و نشان می‌دهند که چگونه می‌توانند به شما در ایجاد مؤلفه‌های وب مدرن و پاسخگو به طور کارآمد و مؤثر کمک کنند.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

آیا به فایل CSS نیاز دارم؟

تنها فایلی که با Tailwind CSS نیاز دارید فایل tailwind.config.js است.

آن فایل تنظیمات پیکربندی شما را نگه می دارد. شما css نمی نویسید یا هیچ فایل css دیگری ندارید. این فایل پیکربندی تنها فایلی است که به آن نیاز دارید.

بهترین شیوه ها برای Tailwind CSS چیست؟

برای توضیح دقیق در مورد بهترین شیوه های Tailwind CSS، لطفاً به مقاله دیگر ما Tailwind CSS Best Practices مراجعه کنید.

Tailwind CSS: آینده طراحی وب

به این فکر کنید که چگونه Tailwind CSS آینده طراحی وب را شکل می دهد. در مورد تأثیر و پتانسیل رشد آن در صنعت توسعه وب بیاموزید.