DEV Community

Cover image for How to install Django with Tailwind CSS and Flowbite
Themesberg profile image Zoltán Szőgyényi
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

How to install Django with Tailwind CSS and Flowbite

#django #python #tailwindcss #flowbite

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.

Tailwind CSS is one of the most popular CSS frameworks based on the utility-first approach and it helps you build user interfaces even faster without ever leaving your HTML.

Flowbite is an open source component library built using the utility classes from Tailwind CSS including interactive elements such as navbars, modals, datepickers, and more.

Let's start with the tutorial!

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:

python -m pip install Django
Enter fullscreen mode Exit fullscreen mode

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

Create a new project

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

django-admin startproject myapp
cd myapp/
Enter fullscreen mode Exit fullscreen mode

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

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

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

python -m pip install django-compressor
Enter fullscreen mode Exit fullscreen mode

Add compressor to the installed apps inside the settings.py file:

# 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
]
Enter fullscreen mode Exit fullscreen mode

Configure the compressor inside the settings.py file:

COMPRESS_ROOT = BASE_DIR / 'static'

COMPRESS_ENABLED = True

STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)
Enter fullscreen mode Exit fullscreen mode

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

static
└── src
    └── input.css
Enter fullscreen mode Exit fullscreen mode

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 myapp/ next to urls.py and add the following content:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')
Enter fullscreen mode Exit fullscreen mode

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

from .views import index

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

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

<!-- 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 + Flowbite</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>
Enter fullscreen mode Exit fullscreen mode

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

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

{% extends "_base.html" %}

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

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

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

You will now get an error that the output.css file does not exist, but that will be fixed once we install Tailwind CSS.

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

Install Tailwind CSS

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

npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

Using the Tailwind CLI create a new tailwind.config.js file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Configure the template paths using the content value inside the Tailwind configuration file:

module.exports = {
  content: [
      './templates/**/*.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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

/* static/src/input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch
Enter fullscreen mode Exit fullscreen mode

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:

npm i flowbite
Enter fullscreen mode Exit fullscreen mode

Require Flowbite as a plugin inside the tailwind.config.js file:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}
Enter fullscreen mode Exit fullscreen mode

Include Flowbite inside the content value of the tailwind.config.js file:

module.exports = {
  content: [
      './templates/**/*.html',
      './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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:

<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

Now that you have everything configured you can check out the components from Flowbite such as navbars, modals, buttons, datepickers, and more.

Flowbite components

In this section I'll show you how you can search for and use the interactive components from Flowbite.

Let's start by adding a }}">Navbar component inside the _base.html file:

<!-- 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 + Flowbite</title>

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

</head>

<body class="bg-green-50">

    <!-- Add this -->
    <nav class="bg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
        <div class="container flex flex-wrap justify-between items-center mx-auto">
          <a href="https://flowbite.com" class="flex items-center">
              <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
              <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Django</span>
          </a>
          <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
            <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
              <li>
                <a href="#" class="block py-2 pr-4 pl-3 text-white bg-green-700 rounded md:bg-transparent md:text-green-700 md:p-0 dark:text-white" aria-current="page">Home</a>
              </li>
              <li>
                <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
              </li>
              <li>
                <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
              </li>
              <li>
                <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
              </li>
              <li>
                <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- End of new HTML -->

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

    <script src="https://unpkg.com/flowbite@1.4.7/dist/flowbite.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This way you already have a functional and responsive navigation bar added to all pages.

Let's take a look how can added more content directly to the view templates, not just the base template.

Check out one of the }}">Card components from Flowbite and add it to the index.html file:

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

{% extends "_base.html" %}

{% block content %}

<h1 class="mb-6 text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1>
<div class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <img class="rounded-t-lg" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="" />
    </a>
    <div class="p-5">
        <a href="#">
            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology
                acquisitions 2021</h5>
        </a>
        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology
            acquisitions of 2021 so far, in reverse chronological order.</p>
        <a href="#"
            class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
            Read more
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </a>
    </div>
</div>

{% endblock content %}
Enter fullscreen mode Exit fullscreen mode

At this point you can use any of the components to build user interfaces easier and faster together with Django, Tailwind CSS and Flowbite.

Check out all of the components by going to the official Flowbite documentation website.

Useful links:

Top comments (1)

Collapse
 
sm0ke profile image
Sm0ke •

Great ..

Read next

anafbarreto profile image

Manipulação de dados desnormalizados em Python: Utilizando re e lstrip()

Ana Carolina Fonseca Barreto -

ahmed__elboshi profile image

Python Tips & Tricks Day 3

ahmed elboshi -

dev3l profile image

Code Elegance - Beyond Loops

Justin L Beall -

villacisg93 profile image

Desarrollo de Ecommerce con Django (parte 2)

Gabriel Villacis -