Styling with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without having to leave your HTML. It's a great choice for Django developers who want to build custom designs without having to write custom CSS. Below are a few ways to use Tailwind CSS with Django for styling your project.

Tailwind UI (Paid)

If you want high quality components, you can use Tailwind UI. You can find the documentation here, you will need to purchase a license to use it. Currently it's at $299.

DaisyUI (Free)

This is a free alternative to Tailwind UI. You can find the documentation here.

Use chatGPT (Paid)

Finally, I've found that using chatGPT is a great way to style your html file for your website with Tailwind CSS. You can give it some hints on main color, style, number of rows/columns, and it will generate the HTML for you.

Alpine.js

We use Alpine.js for interactivity. It's a minimal framework that allows us to add interactivity to our pages without having to write a lot of JavaScript.

Without javascript, certain user interactions such as close a modal, or open a dropdown, would not be possible. Alpine.js allows us to do this without having to write a lot of JavaScript.

Installation

To install Alpine.js, you can include the following script tag in your HTML file, which is already included in the base.html file.

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Even though Tailwind CSS is a utility-first CSS framework, it doesn't provide any interactivity. For that, you can use vanilla javscript or, if you are like me, or prefer a more declarative approach, you can use alpine.js.

We have included a few code samples to show how to use alpine.js to close and open a mobile menu.

You can find the sample code located in the pages/components/header.html file.

For more details, refer to alpine.js documentation here.

If you are an experienced developer, it will probably take you a few minutes to understand how it works.