Django

This guide explains how to set up Hummingbird with Django using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a Django app.

Installation Django

Follow the steps to create a new Django project and install Tailwind CSS with HummingBird to get the full benefits of the component library.

1. Prerequisites

Make sure that both Node.js and Python installed on the local machine.

2. Install Django

Install Django on a device by following the official installation guide or by running the following command in the terminal:

python -m pip install Django

Now, create a new Django project.

Create a Django project

1. Initialize Django app

Run the following command in the terminal to create a new Django project with the name hummingbirdapp:

django-admin startproject hummingbirdapp 
cd hummingbirdapp/

2. Create a templates directory

Create a new templates/ directory inside the project folder and then update the existing settings.py file:

TEMPLATES = [
  {
      ...
      'DIRS': [BASE_DIR / 'templates'], # new
      ...
  },
]

3. Installed django-compressor

Installed django-compressor by running the following command in the terminal:

python -m pip install django-compressor

Add compressor and hummingbirdapp to the INSTALLED_APPS list inside the settings.py file:

INSTALLED_APPS = [
  ...
  'compressor', # new
  'hummingbirdapp', # new
  ...
]

Add the following lines to the bottom of the settings.py file to configure compressor:

COMPRESS_ROOT = BASE_DIR / 'static'
COMPRESS_ENABLED = True
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

4. Create static/ directory

Create a new static/ directory inside the project folder and then create a new src/ directory inside the static folder. Inside the src folder create a new file named styles.css.

static
└── src
  └── styles.css

Later we will import the Tailwind CSS directives and use it as the source file for the final stylesheet.

5. Create views.py file

Create a new views.py file inside hummingbirdapp/ next to urls.py and add the following content:

from django.shortcuts import render 

def index(request):
  return render(request, 'index.html')

Import the view inside urls.py:

from .views import index

urlpatterns = [
path('admin/', admin.site.urls),
path('', index, name='index'),
]

6. Create base file

Create a new file named _base.html inside the templates/ directory and add the following content:

<!-- templates/_base.html -->

{% load compress %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Django + Tailwind CSS + HummingBird</title>

  {% compress css %}
  <link rel="stylesheet" href="{% static 'src/output.css' %}">
  {% endcompress %}

</head>

<body class="bg-green-50">
  <div class="container mx-auto mt-4">
      {% block content %}
      {% endblock content %}
  </div>
</body>

</html>

7. Create index.html file

Create an index.html file that will be served as the homepage:

<!-- templates/index.html -->

{% extends "_base.html" %}

{% block content %}
<h1 class="text-3xl font-bold underline text-center text-gray-800">
  Hello, Django with Tailwind CSS and HummingBird!
</h1> 
{% endblock content %}

8. Create local server

Finally, create a local server instance by running the following command:

python manage.py runserver

Note: You’ll now get an error that the output.css file doesn’t exist, but that’ll be fixed once we install Tailwind CSS.

Awesome! Now you have a working Django project locally. Let’s continue by installing Tailwind.

Install Tailwind CSS

  1. Install tailwindcss and @tailwindcss/cli via npm.
npm install tailwindcss @tailwindcss/cli --save-dev
  1. Add the @import "tailwindcss"; import inside the static/src/styles.css file:
@import "tailwindcss";
  1. Run the CLI tool to scan source files for classes and build the CSS.
npx @tailwindcss/cli -i ./static/src/styles.css -o ./static/src/output.css --watch

Install HummingBird

  1. Install Hummingbird via preferred package manager:
npm install @hummingbirdui/hummingbird
  1. Import the HummingBird styles inside the static/src/styles.css file:
@import "tailwindcss";
@import "@hummingbirdui/hummingbird";
  1. Create a new folder named vendor/ inside the static/ directory and then create a new folder named js/ inside the vendor directory.
static
└── vendor
  └── js
  1. Copy the hummingbird.bundle.js file from node_modules/@hummingbirdui/hummingbird/dist/ to static/vendor/js/. The following command can be used to do that:
cp node_modules/@hummingbirdui/hummingbird/dist/hummingbird.bundle.js static/vendor/js/
  1. Finally, import the HummingBird script inside the _base.html file before the closing body tag:
<script src="{% static 'vendor/js/hummingbird.bundle.js' %}"></script>

Hummingbird has now been successfully installed in the Django project. Components can be used immediately.

Note: If the python command doesn’t work, try using python3 instead.

Previous

Astro
Next

JavaScript