Tailwind CSS Django - Flowbite

Learn how to install Tailwind CSS and Flowbite inside a Django project and start developing modern web applications with a high-level Python framework

Django is an open-source web framework following the model-template-views architecture built in Python currently maintained by the Django Software Organization.

It is currently being used by small and large corporations for websites such as YouTube, Spotify, Instagram, Disqus, and Dropbox and demand for Django developers is increasing.

By following this guide you will learn how to properly set up a Django project with Tailwind CSS and Flowbite to start developing modern web applications even faster.

Requirements #

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

Make sure that you have both Node.js and Python installed on your local machine.

After that, you’ll need to install Django on your local computer by following the official installation guide or by running the following command in the terminal if you have pip available in your Python environment:

Terminal

python -m pip install Django

Now that you have all the required technologies installed you can start by creating a new Django project.

Create a Django project #

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

Terminal

django-admin startproject flowbiteapp
cd flowbiteapp/

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

settings.py

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

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

Terminal

python -m pip install django-compressor

Add compressor and flowbiteapp (or the name of your app) to the installed apps inside the settings.py file:

settings.py

# config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'compressor',  # new
    'flowbiteapp',  # new
]

Configure the compressor inside the settings.py file:

settings.py

COMPRESS_ROOT = BASE_DIR / 'static'

COMPRESS_ENABLED = True

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

Create two new folders and an input.css file inside the static/src/ folder:

Terminal

static
└── src
    └── input.css

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

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

views.py

from django.shortcuts import render

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

Import the newly created view instance inside the urls.py file by adding the following code:

urls.py

from .views import index

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

Create a new _base.html file inside the templates/ directory:

_base.html

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

{% extends "_base.html" %}

{% block content %}
  <h1 class="text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1>
{% endblock content %}

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

Terminal

python manage.py runserver

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 #

Run the following command the install Tailwind CSS as a dev dependency using NPM:

Terminal

npm install tailwindcss @tailwindcss/cli --save-dev

Import the Tailwind CSS directive inside the input.css file:

input.css

/* static/src/input.css */

@import "tailwindcss";

Run the following command to watch for changes and compile the Tailwind CSS code:

Terminal

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

Open localhost:3000 in your browser and you’ll see working HTML with Tailwind CSS code.

Now that you have configured both Django and Tailwind CSS you can also set up Flowbite to get access to the whole collection of interactive components like navbars, modals, dropdowns, buttons, and more to make development even faster.

Install Flowbite #

Flowbite is an open source library of interactive components built on top of Tailwind CSS and it can be installed using NPM and required as a plugin inside Tailwind CSS.

Install Flowbite as a dependency using NPM by running the following command:

Terminal

npm install flowbite --save

Import the default theme variables from Flowbite inside your main input.css CSS file:

input.css

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

Import the Flowbite plugin file in your CSS:

input.css

@plugin "flowbite/plugin";

Configure the source files of Flowbite in your CSS:

input.css

@source "../../node_modules/flowbite";

Include Flowbite’s JavaScript file inside the _base.html file just before the end of the <body> tag using CDN or by including it directly from the node_modules/ folder:

_base.html