Raja Simon

Tags

Newsletter

Django Tailwind CSS Tutorial

Published 20 May, 2022

Reading time: 3 Mins


How to integrate TailwindCSS with Django in 2022?. This post is for the people who wanted to integrate Django with tailwind but not interested in using NPM.

Let’s talk about integrating tailwindcss because recent javascript ecosystem doens’t really work with Python but that’s cahnged. So now your question will be wait! Is it possible to integrate with tailwind without NPM?

The answer is Yes. We can integrate with tailwind without node ecosystem. There is a standalone version tailwind releases just for this specific use cases.

I have two approach to solve this and you can pick any one of the method based on your project requirements.

Method 1

The first method is to directly add Tailwind CSS in the head of your base.html.

<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>

Because of the utility first approach the TailwindCSS is very large in nature. If you add this in your production it will slow your website very much. I highly recommend the second approach once you get through the production stage.

You can also add plugins to this method by passing additional parameter to the CDN url.

<script src="https://cdn.tailwindcss.com?plugins=forms,typography><script>

You have to remember that adding plugins by this method will further slow your websites. Production There is debug template variable in Django that we can use to detect the production and load that from the cache CSS file instead of the CDN one.

Add INTERNAL_IPS to the Django settings. If you add that then we can use debug in the Django templates.

{% if debug %}
  <script src="https://cdn.tailwindcss.com"></script>
{% else %}
  <link rel="stylesheet" href="{% static 'css/main.css' %}">
{% endif %}

To generate a pure css out of your template you need to follow the second method. I say the second method is for the mature projects. For just a hobby one that you don’t need to run anything besides run server. Most suitable use cases will be the vscode code runner.

Method 2

In this method I’m going to download a Tailwind CSS standalone file. You can download the executable script from Github page Release v3.0.24 · tailwindlabs/tailwindcss · GitHub

Once you download the script make it executable. chmod +x tailwindcss-macos-arm64 and change the name to mv tailwindcss-macos-arm64 tailwindcss

Now that you configured everything it’s time to create a tailwind configuration files. Just like NPM based project now you can use the executable file to generate these.

# Create a tailwind.config.js file
./tailwindcss init

After it created the tailwind.config.js file update the content inside it. Recent Tailwind configuration required you to mention html files.

module.exports = {
  content: ["./app/templates/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Create a static/css/ folder in your app and then create a input.css file inside it.

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

Run the watcher command in a separate terminal along with runserver. This will watch for the html file that are mentioned in the tailwind.config.js file and it will build the equivalent CSS file and put it in the main.css file.

./tailwindcss -i ./app/static/css/input.css -o ./app/static/css/main.css --watch

For the production switch --watch to --minify.

Update 1:

There is a Tailwind CSS command line utility available in python package so instead of downloading it from the Github you can just install via pip.

pip install pytailwindcss

Read More