This project is collabration between me as BackEnd and Sharafi as FrontEnd developer
In the begining you need to setup your django project
Ensure that node js is installed on your computer by running this command :
node -vThe reason of node is for npm pakage so ensure that it's installed by node :
npm -vlet's start whith installing django-tailwind , It's pakage for connect django and tailwind :
python -m pip install django-tailwindAdd 'tailwind' to INSTALLED_APPS in settings.py :
INSTALLED_APPS = [
# other Django apps
'tailwind',
]Create a Tailwind CSS compatible Django app, I like to call it theme :
python manage.py tailwind initAdd your newly created 'theme' app to INSTALLED_APPS in settings.py :
INSTALLED_APPS = [
# other Django apps
'tailwind',
'theme'
]Register the generated 'theme' app by adding the following line to settings.py file :
TAILWIND_APP_NAME = 'theme'Make sure that the INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 ip address :
INTERNAL_IPS = [
"127.0.0.1",
]Install Tailwind CSS dependencies, by running the following command :
python manage.py tailwind installThe Django Tailwind comes with a simple base.html template located at your_tailwind_app_name/templates/base.html . You can always extend or delete it if you already have a layout .
If you are not using the base.html template that comes with Django Tailwind, add {% tailwind_css %} to the base.html template :
{% load static tailwind_tags %}
...
<head>
...
{% tailwind_css %}
...
</head>The {% tailwind_css %} tag includes Tailwind’s stylesheet .
Let’s also add and configure django_browser_reload , which takes care of automatic page and css refreshes in the development mode . Add it to INSTALLED_APPS in settings.py :
INSTALLED_APPS = [
# other Django apps
'tailwind',
'theme',
'django_browser_reload'
]Staying in settings.py , add the middleware:
MIDDLEWARE = [
# ...
"django_browser_reload.middleware.BrowserReloadMiddleware",
# ...
]The middleware should be listed after any that encode the response, such as Django’s GZipMiddleware . The middleware automatically inserts the required script tag on HTML responses before </body> when DEBUG is True .
Include django_browser_reload URL in your root url.py :
from django.urls import include, path
urlpatterns = [
...,
path("__reload__/", include("django_browser_reload.urls")),
]Run your django :
python manage.py runserverFinally, you should be able to use Tailwind CSS classes in HTML. Start the development server by running the following command in your terminal :
python manage.py tailwind startI hope that you enjoy it, Let me know if you have any suggestion