Django Tailwind Template

gdeol4

Django project template with Tailwind CSS installed

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 theme app to INSTALLED_APPS in settings.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.html in the templates directory

{% 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 runserver

You're all set! You can now start building your Django project with Tailwind CSS and Django BrowserReload pre-configured.

Usage

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.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

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.

Top categories