آموزش تبدیل پروژه ی Bootstrap به Tailwind-css
در این مقاله از گروه برنامه نویسی وارنا ، به آموزش تبدیل پروژه ی Bootstrap به Tailwind-css میپردازیم.
اگر بخواهید یک پروژه ی Bootstrap را به Tailwind تبدیل کنید ، یعنی کامپوننت های بوت استرپ را به کلاس های تیلویند تبدیل کنید چه میکنید ؟ آیا پروژه را از ابتدا بازنویسی خواهید کرد؟ ما در این مقاله به شما یاد میدهیم که چگونه با استفاده از پکیج tailwindo ، کد های بوت استرپ خود را به کد تیلویند تبدیل کنید.
نصب tailwindo
شما میتوانید با قطعه کد زیر ، اقدام به نصب این پکیج نمایید:
tailwindo آموزش استفاده از
اگر از laravel برای پروژه ی خود استفاده کردید ، از کد زیر برای تبدیل استفاده کنید:
<p>
tailwindo resources/views --extensions=php --recursive=true --replace=true
</p>
و برای تبدیل فایل های Vue.js یا Html نیز میتوانید از کد زیر استفاده کنید:
<p>
tailwindo resources/assets/js/components --extensions=vue --recursive=true
--replace=true
</p>
و اگر میخواهید یک فایل را به صورت کلی تبدیل نمایید از کد زیر استفاده نمایید:
<p>tailwindo file.blade.php</p>
دوره ی آموزش Tailwind وارنا
ما در گروه برنامه نویسی وارنا ، دوره ی آموزشی مخصوص تیلویند آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند رو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.
نتیجه
بعد از اجرا کردن کد تبدیل ، شاهد تبدیل کامپوننت های بوت استرپ به تیلویند خواهیم بود. برای مثال:
<div class="alert alert-info"></div>
<div
class="relative px-3 py-3 mb-4 border rounded text-teal-darker border-teal-dark bg-teal-lighter"
<input class="form-control" type="text"/>
<input
class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded"
type="text"/>
<a href="#" class="btn btn-primary btn-lg"></a>
<a
href="#"
class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-blue-lightest bg-blue hover:bg-blue-light py-3 px-4 text-xl leading-tight"
></a> جمع بندی
این پکیج نه تنها کار تبدیل کامپوننت های بوت استرپ به کلاس های تیلویند را انجام میدهد ، بلکه باعث میشود درک بیشتری نسبت به ارتباط کد های بوت استرپ و تیلویند پیدا کنید و اگر کاملا با کلاس های مختلف و پر شمار تیلویند آشنا نیستید ، شناخت بیشتری پیدا کرده و مهارت خود را در استفاده از این فریمورک جذاب و دوست داشتنی افزایش دهید. برای توضیحات بیشتر در مورد استفاده از tailwindo میتونید از لینک زیر استفاده کنید:
آموزش و استخدام در وارنا
آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قبولی، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !