@توشارتوشر صحو
من یک مهندس وب متمرکز بر محصول ، کاملاً پشته و متعصب مدیریت با گرایش به UX هستم.
اینترنت از قبل با تعداد زیادی کتابخانه UI پر شده است. وجود دارد:
…و خیلی بیشتر. اکنون ، وقتی تعداد زیادی کتابخانه UI وجود دارد ، tailwind چه کاری انجام می دهد تا بتواند آن را از پاپ gen جدا کند.
Tailwind CSS چیست؟
طبق وب سایت رسمی ،
Tailwind CSS یک چارچوب بسیار قابل تنظیم و سطح پایین CSS است که تمام عناصر سازنده ای را که برای ساختن طرح های سفارشی و بدون هیچ گونه سبک آزار دهنده ای که باید برای لغو کردن آنها مبارزه کنید ، به شما می دهد.
به بیان ساده ،
Tailwind یک کتابخانه UI نیست بلکه یک چارچوب CSS است. نظرات داده نمی شود. این امر بر نحوه ظاهر یک جز component حاکم نیست ، اما به ما قدرت ایجاد یک کامپوننت با استفاده از کلاسهای ابزار ارائه شده را می دهد.
بیایید این چرخش را بدهیم ، باید اینطور باشد.
مرحله 1
از الگوی React-Typescript-Parcel2 من شروع می کنیم تا یک پروژه جدید React همه زنگ ها و سوت ها را داشته باشیم (جزئیات بیشتر در این باره اینجا)
گام 2
افزودن بادگیر به پروژه
Tailwind برای کامپایل کردن در CSS ساده از PostCSS استفاده می کند. یک پرونده جدید به نام پرونده .postcssrc در پوشه اصلی پروژه ایجاد کنید.
{
"modules": true,
plugins: {
autoprefixer: true,
tailwindcss: true
}
}برای غیر فعال کردن JSlinting برای آن فایل ، حتماً این مورد را به .eslintignore اضافه کنید.
مرحله 3