خواندن ۴ دقیقه·۲ سال پیش

آموزش نصب Tailwind css در Django

اگر از فرانت اند به سمت بک اند برید , احتمالا نمیتونید عادت های فرانت رو کنار بزارید و احتمالا چند وقت بعد از شروع بک اند , دنبال این میگردید که چطور فریم ورک های Css رو روی فریم ورک هایی مثل جنگو نصب کنید .

فریم ورک Tailwind ، فریم ورکی هست که در حال حاضر محبوب ترین فریم ورک Css به حساب میاد و تقریبا روی تمام بخش ها میتونید ازش استفاده کنید و این عالیه که شما یک ابزار قدرتمند رو روی هر برنامه ای بتونید نصب کنید .

داستان من

من یک هفته بعد از شروع جنگو به مشکل استایل دادن به template ها بر خوردم که اذیتم کرد و اصلا دلم نمیخواست که چیزی مثل بوتسترپ رو داشته باشم تا یک استایل خشک بسازم ، دوست داشتم که استایل پروژه آزاد باشه و بتونم اون رو هر جوری که خواستم تغییر بدم و Tailwind بهترین گزینه بود و این سوال برام پیش اومد که چطوری tailwind رو داخل django نصب کنم ؟ نصب کردم چطوری ران کنم ؟ و از اینجور چیز ها ...

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

نصب Tailwind Css

1 - در مرحله اول ، django-tailwind رو با استفاده از pip نصب کنید :

python -m pip install django-tailwind

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

python -m pip install git+https://github.com/timonweb/django-tailwind.git

2 - برنامه نصب شده رو توی INSTALLED_APP در بخش settings.py وارد کنید تا جنگو اون رو شناسایی کنه :

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]

3 - بعد از نصب برنامه ، باید tailwind رو با برنامه سازگار یا اینیشیال کنیم ، دستور زیر رو دنبال کنید :

python manage.py tailwind init

این دستور , app جدیدی توی پروژه ایجاد میکنه که تمام دستورات و بخش های tailwind داخل اون هست و از اون خونده میشه . اسم این بخش رو به صورت پیشفرض theme بزارید تا خوانا تر بشه .

4 - و بعد دوباره اون برنامه theme رو توی تنظیمات جنگو وارد کنید تا اون رو بشناسه :

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]

5 - بخش theme رو در بخش settings.py رجیستر و فعال کنید ، دستور زیر رو دنبال کنید :

TAILWIND_APP_NAME = 'theme'

6 - در حرکت بعدی باید Ip داخلی برنامه رو با Tailwind یکی کنید تا دریافتی ها درست باشه ، این بخش رو به بخش تنظیمات اضافه کنید :

INTERNAL_IPS = [
    &quot127.0.0.1&quot,
]

7 - وابستگی ها یا dependencies های tailwind رو با کد زیر نصب کنید :

python manage.py tailwind install

8 - حالا میتونید از بخش های مختلف tailwind استفاده کنید . تگ های زیر رو به تمپلیت اصلی پروژتون اضافه کنید :

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

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

برای فعال کردن این بخش فقط django_browser_reload رو به تنظیماتی که انجام دادیم اضافه کنید :

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme',
  'django_browser_reload'
]

10 - برای تکمیل کردن مرحله قبلی باید یک میدل ویر در بخش settings.py اضافه کنیم . کد زیر رو دنبال کنید:

MIDDLEWARE = [
  # ...
  &quotdjango_browser_reload.middleware.BrowserReloadMiddleware&quot,
  # ...
]

11 - و در نهایت در بخش urls.py باید این بخش ریلود رو اضافه کنیم تا کار تکمیل بشه :

from django.urls import include, path
urlpatterns = [
    ...,
    path(&quot__reload__/&quot, include(&quotdjango_browser_reload.urls&quot)),
]

12 - و در نهایت ما tailwind css رو نصب کردیم و تنظیمات جنگو رو هم تماما انجام دادیم و پروژه آماده اجرا شدنه . دستور زیر رو دنبال کنید و تمام :

python manage.py tailwind start

در نهایت این تمام کاری بود که شما باید دنبال میکردید تا tailwind رو روی جنگو نصب و استفاده کنید . خوشحالم که محتوای مفید و فارسی در اختیار برنامه نویس های فارسی زبان قرار گرفت .

برنامه نویسیجنگوdjangotailwindcssفریم ورک

علی اکبر ظهور

محتوای کاربردی در زمینه برنامه نویسی و مهندسی نرم افزار تولید میکنم و سعی میکنم تا تجربیات خودم رو مطرح کنم . صفحه لینکدین من : https://www.linkedin.com/in/aliakbarzohour/

شاید از این پست‌ها خوشتان بیاید