Here's a single README file with all the instructions, settings, and code combined:
# Django Project Template with Tailwind CSS and Django BrowserReload
This is a Django project template that comes pre-configured with Tailwind CSS and Django BrowserReload for a streamlined development experience.
## Prerequisites
- Python (3.6 or later)
- Node.js (12.x or later)
- npm (installed with Node.js)
## Setup
1. **Clone the repository**
```bash
git clone https://github.com/your-username/django-tailwind-template.git
cd django-tailwind-template- Create a virtual environment and activate it
python -m venv env
source env/bin/activate # On Windows, use `env\Scripts\activate`- Install Django and other Python dependencies
pip install django django-tailwind django-browser-reload- Install Tailwind CSS dependencies
python manage.py tailwind install- Create a Tailwind CSS compatible Django app called
theme
python manage.py tailwind init theme- Add the
themeapp toINSTALLED_APPSinsettings.py
INSTALLED_APPS = [
# ...
'tailwind',
'theme',
'django_browser_reload',
# ...
]- Register the Tailwind app in
settings.py
TAILWIND_APP_NAME = 'theme'- Add Django BrowserReload settings to
settings.py
# Django BrowserReload settings
# ------------------------------------------------------------------------------
# https://github.com/django-browser-reload/django-browser-reload
INTERNAL_IPS = [
"127.0.0.1", # Add your local IP address here
]
BROWSER_RELOAD_IMPORT_STRINGS = [
"django_browser_reload.utils.get_modules",
]
BROWSER_RELOAD_LIVE_RELOAD = True
BROWSER_RELOAD_LIVE_RELOAD_IGNORE = [
r"static/.*",
r"media/.*",
]- Create a base template
base.htmlin thetemplatesdirectory
{% load tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My App{% endblock %}</title>
{% tailwind_css %}
</head>
<body>
<div class="container mx-auto">
{% block content %}
{% endblock %}
</div>
{% if request.user.is_staff %}
{% browser_reload_script %}
{% endif %}
</body>
</html>- Start the development server
python manage.py runserverYou're all set! You can now start building your Django project with Tailwind CSS and Django BrowserReload pre-configured.
- Write your HTML templates and use Tailwind CSS utility classes to style your components.
- Django BrowserReload will automatically reload the browser when you make changes to your Django project files during development.
Contributions are welcome! Please open an issue or submit a pull request.
This project is licensed under the MIT License.
This README file includes:
- Prerequisites
- Step-by-step setup instructions
- Code snippets for `settings.py` and `base.html`
- Usage instructions
- Contributing guidelines
- License information
You can copy and paste this entire README file into a text file and include it in your Django project template repository for reference.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent