Add preline.co (ui)

[MaestriGroup33]

How do I add preline.co to the project?

The website instructs me to try in the Tailwind configuration how to use base.html to "search" the file in the node directory... but in Falco, htmx is used... how do I replace this?

[Tobi-De]

How do I add preline.co to the project?

The website instructs me to try in the Tailwind configuration how to use base.html to "search" the file in the node directory... but in Falco, htmx is used... how do I replace this?

You don't need to replace htmx; in fact, there isn't much relation between Tailwind (or preline) and htmx. htmx is there to help with interactivity on the web app, and it doesn't have much to do with Tailwind or preline.

The Falco-generated project comes with https://github.com/oliverandrich/django-tailwind-cli to integrate Tailwind. It makes the setup simpler since you don't need Node.js to make it work. However, it comes with limitations, like not being able to add additional modules like preline, for example. To make this work, you need to be somewhat familiar with the JavaScript ecosystem, have npm installed on your computer, etc.

With that in mind, you need to remove the Tailwind setup that comes with the project. This is quite easy to do:

1. Remove django-tailwind-cli from the pyproject.toml file.
2. Remove django_tailwind_cli from the INSTALLED_APPS (specifically, the THIRD_PARTY_APPS constant).
3. In your base.html file, remove every template tag with a name containing CSS, such as {% load tailwind_cli %} or {% tailwind_css %}.

Once that's done, set up preline like you would normally do: install the package at the root of your project, configure Tailwind, etc. Follow the docs. The only thing you need to do in Django is add the compiled Tailwind output file (which is just a regular CSS file) into your base.html. That should be it.

There is also this Django package, https://github.com/timonweb/django-tailwind, that makes the process of integrating Tailwind and Django easier without sacrificing the option to add additional npm packages (like preline).