Django-Tailwind-DaisyUI Template

Overview • Features • Installation • Usage • Configuration • Acknowledgements • License

Overview

A modern Django project template with Tailwind CSS and DaisyUI integration, providing a beautiful, responsive UI framework with minimal effort. This template combines the power of Django's backend capabilities with the utility-first approach of Tailwind CSS and the component-rich features of DaisyUI.

Perfect for quickly bootstrapping web applications with a professional look and feel, while maintaining complete customisation control.

Features

• Django Integration: Full Django framework with best practices
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• DaisyUI Components: Pre-designed beautiful components built on Tailwind CSS
• Theme Support: Multiple themes with easy switching capability
• Responsive Design: Mobile-first responsive layouts
• Environment Configuration: Environment variables support via dotenv
• Development Workflow: Hot-reloading CSS changes during development
• Production Ready: Optimised builds for production deployment

Installation

1. Clone this repository:

   git clone <your-repository-url>
   cd <project-directory>

2. Create a virtual environment and activate it:

   python -m venv venv
   # On Windows
   venv\Scripts\activate
   # On macOS/Linux
   source venv/bin/activate

3. Install Python dependencies:

   pip install -r requirements.txt

4. Create a .env file in the project root:

   # Django Tailwind Configuration
   NPM_BIN_PATH=C:\\Program Files\\nodejs\\npm.cmd
   # For macOS/Linux
   # NPM_BIN_PATH=/usr/bin/npm
   

5. Install Tailwind CSS dependencies:

   cd theme
   npm install
   cd ..

Usage

1. Start the Tailwind CSS watcher to compile CSS automatically:

   python manage.py tailwind start

2. In another terminal, start the Django development server:

   python manage.py runserver

3. Visit http://localhost:8000 in your browser to see the application.

Configuration

Tailwind CSS Configuration

The Tailwind CSS configuration is located in theme/static_src/tailwind.config.js. You can customise themes, colours, and plugins here.

module.exports = {
    // ... other configurations
    plugins: [
        // ... other plugins
        require('daisyui'),
    ],
    daisyui: {
        themes: ["light", "dark", "cupcake"],
    },
}

Django Settings

Key settings for the Django-Tailwind integration:

# settings.py
INSTALLED_APPS = [
    # ... other apps
    'tailwind',
    'theme',
]

TAILWIND_APP_NAME = 'theme'
NPM_BIN_PATH = os.getenv('NPM_BIN_PATH')  # Loaded from .env file

Adding More DaisyUI Themes

To add more themes, update the daisyui.themes array in tailwind.config.js:

daisyui: {
    themes: ["light", "dark", "cupcake", "corporate", "synthwave"],
},

Acknowledgements

• Tom Dekan for his helpful article on implementing Tailwind CSS with Django

License

This project is dual-licensed under both the MIT License and the GNU General Public License v3.0 (GPL-3.0).

You may choose either license according to your needs. Please see the corresponding license files for the full terms and conditions.