How to install Tailwind CSS and Flowbite inside a Django Project

Tailwind CSS is an open-source CSS framework. The difference between Bootstrap is that Tailwind does not provide predefined classes for elements such as tables or buttons. It makes it easier to write and maintain the code of your application. You don’t have to switch back and forth between CSS and your main HTML template.

Flowbite enables us to build websites faster with components on top of Tailwind CSS. It’s open-source and it’s built with utility classes from Tailwind CSS that can be used as a starting point when creating user interfaces.

In this tutorial, I will show you how you can create a beautiful Django UI using Tailwind CSS and Flowbite.

Prerequisites

• Node js. How to install Node.js 17 on Ubuntu 20.04
• Python. Here is a peek view of Installing python How to install Python 3.9 interpreter on Ubuntu 20.04
• Know how to create a Django project. Check this out How to set up a Python Django Application using Django 4.0

1. Create a Django project

To create a Django project, start by creating a virtual environment and make sure to activate the environment so that whatever you are installing is isolated from your system processes.

python3 -m venv env

To activate the virtual environment created, use the following command.

source env/bin/activate

2. Install Django

After the virtual environment have been activated, proceed to install Django.

pip install django 

It will proceed to pull Django and install it on your virtual environment.

After Django has been installed, go ahead to create a project to hold all the Django functionality.

django-admin startproject flowbite.

The above command will create a project called flowbite and inside flowbite folder, you will see settings.py, asgi.py, urls.py, wsgi.py, __init__.py

We are only going to deal with the settings.py. We need to tell the application where to find the templates and that is done inside the settings file, but first create a templates folder under the root of your project.

#settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates' #connects templates folder created
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

3. Install the Django compressor

Django compressor compresses linked and inline JavaScript or CSS into a single cached file. Django compressor doesn’t care if different pages use a different combination of statics. It doesn’t care if you use inline scripts or style, it doesn’t get in the way. Install the Django compressor with the following command.

pip install django-compressor

Once installed, go to the settings.py file and add compressor to the installed apps

#settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

# third party apps
    'compressor',#new app
]

We can now modify the Django compressor’s default behavior and make adjustments to the website. In settings.py add the following

#settings.py
COMPRESS_ROOT = BASE_DIR / 'static'

COMPRESS_ENABLED = True

STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

4. Create static folder

Now is the time to create a static folder that can hold images, javaScript. In the root of the project create static folder and inside it create another folder called src and lastly create a input.css. Input.css will come once we install Tailwind CSS.

5. Create a Django application

To create a django app, on the root of your django project type python manage.py startapp <app_name>

python manage.py startapp css

Then we need to modify our views.py inside app folder to handle what will be displayed on the UI. Add the following to the views.py file

from django.shortcuts import render

# Create your views here.

def home(request):
    context={}
    return render(request, 'index.html', context)

Inside CSS app create a urls.py file for routes creation, then add the following

#css/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home')
]

We now need to tell the root project where to find our home directory. Inside flowbite/urls.py add the following

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('css.urls'))
]

Next, go to the templates folder we created earlier and create a _base.html template that can be inherited by all templates in the browser. Add the following simple HTML file.

Remember the views.py file we created earlier, it has an index.html. Create index.html inside the templates folder to serve that view.

{% extends "_base.html" %} #inheriting the base template

{% block content %}
  <h1 class="text-3xl text-green-800">Welcome to Django Project that uses Flowbite and Tailwind CSS</h1>
{% endblock content %}

6. Install Tailwind CSS

To install Tailwind CSS we require NPM package. If you didn’t install Node at the beginning this is the time to do so before you continue. Run npm to install Tailwind css

npm install -D tailwindcss

After that is finished, create tailwind.config.js file with the help of TailwindCLI using the following command

$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js

Then, configure template paths inside the tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
     './templates/**/*.html'
],
  theme: {
    extend: {},
  },
  plugins: [],
}

We need to add the Tailwind directives to our CSS. Inside input.css add the following

@tailwind base;
@tailwind components;
@tailwind utilities;

The next thing is to start the Tailwind CLI build process.

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch

7. Install Flowbite

Install Flowbite as a dependency using npm

npm i flowbite

Then we need to include flowbite inside tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
     './templates/**/*.html'
     './node_modules/flowbite/**/*.js' #flowbite
],
  theme: {
    extend: {},
  },
  plugins: [
     require('flowbite/plugin')# flowbite
],
}

Lastly, add the following script to the _base.html template to serve Flowbite correctly.

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Now you can run your server with python manage.py runserver. You will see a beautiful message you created earlier in your views.py

Conclusion

We have successfully added Tailwind CSS and Flowbite to our Django project. You can implement Nvabrar easily now. For the full project check it at GitHub.