Installing Tailwind CSS v2 with Django-Tailwind

Recently, there have been loads of tutorials on how to integrate Tailwind CSS and Django. There are several different ways you could do this, from the simplistic "let's include a link from CDN" to "roll-up your sleeves and dive into the Webpack black hole."

I've been working with Tailwind CSS since the beginning of 2019 and quickly realized that I didn't want to repeat myself and needed a reliable and straightforward theme setup that ticks all the right boxes. And for me, those boxes are:

• Have the latest version of Tailwind CSS installed (v2.x currently);
• Have the development mode that watches for changes in my CSS files;
• Have SASS support in my CSS files.

That's how Django-Tailwind was born. Now, 88 commits and almost two years later, it has 222 stars and supports the shiny new Tailwind CSS v2 by default.

So what does Django-Tailwind do for you?

Django-Tailwind has a python manage.py tailwind init <my_theme_name> command that generates a separate Django app for you. That app contains all the Tailwind CSS configuration and static assets.

After you have generated the theme app, you could turn off django-tailwind and forget about it. Your theme app doesn't need it to function correctly. But I suggest you leave the django-tailwind package on as it has some convenient tools you might like to use, like tailwind start and tailwind update commands.

Let me guide you through the installation process

1. Install the package:

   pip install django-tailwind
   

2. Add tailwind to INSTALLED_APPS in settings.py;

3. Generate a theme app with the Tailwind configuration:

   python manage.py tailwind init my_theme_name 
   

4. Add the my_theme_name app to to INSTALLED_APPS in settings.py;

5. Register the my_theme_name app by adding the following string to settings.py:

   TAILWIND_APP_NAME = "my_theme_name"
   

6. Run the following command to install Tailwind CSS dependencies:

   python manage.py tailwind install
   

7. Start Tailwind CSS in dev mode:

   python manage.py tailwind start
   

Tailwind CSS will start in watch mode, so that it will regenerate the stylesheet every time you edit SCSS files in the my_theme_name app.

And basically that's all. You now have everything installed and configured.

Going to production

When you're ready, you can generate a production bundle by running the following command:

python manage.py tailwind build

Updating Tailwind CSS

To check if there are any updates for Tailwind CSS dependencies, run:

python manage.py tailwind check-updates

To update Tailwind CSS dependencies, run:

python manage.py tailwind update

There might be some hiccups down the road, mainly related to the Node/NPM installation on your system, but in the majority of cases, if you're on Node v12.3+, you should be fine. Please refer to the README.md for advanced use-cases, like Purge CSS setup, or for advice on how to overcome some Windows-related issues.

Although I don't think there's much that needs to be added to this package, if you have any ideas or fixes, feel free to jump into the issue queue of the django-tailwind repository and let me know.

Thank you and take care!