Django using Tailwind CSS

Web development using Django with Tailwind css, using for Deep Learning project purposes.

Tech Stack

• Django v5.1.3
• Tailwind CSS v3.4.14
• Python v3.12.7
• Node.js v22.11.0

Getting Started

1. Use this repo as template or/and clone the project

git clone https://github.com/hibatillah/django-tailwindcss
cd django-tailwindcss

2. Make sure you have python installed, check version by running

python --version

4. Create virtual environment (venv)

python -m venv venv

5. Activate virtual environment (venv)

# on windows
venv/Scripts/activate

# on mac
source venv/bin/activate

[!IMPORTANT] Make sure to always activate venv before run project

6. Install Depedencies

pip install -r requirements.txt
npm install

7. Run project

invoke start

8. Project running on http://localhost8000

[!NOTE] All command run concurrently using invoke scripts.
Modify command in tasks.py.

All the required depedencies store in requirements.txt and pakcage.json.

[!WARNING] Django hot reload is not working because it runs different commands manager at the same time.
Haven't looked into it yet.

Run command separately

cd deep_learning
python manage.py runserver

npm run watch

Add new depedencies

Install your depedencies with actived venv, then add depedencies to requirements.txt with next command

cd deep_learning
pip freeze > requirements.txt

Run this command everytime you add python depedencies into your project

Convention

Read Django documentation

• Modify logic in views.py
• Set routing in urls.py
• Modify interface in /templates
• Static assets in /static
• Styling directly using Tailwindcss or in index.css
• Modify DOM in index.js

[!WARNING] Change deep_learning directory name will break the project structure.
If you want to change it, make sure to change all the reference in the project.