'How can I add tailwind css to an existing django app

I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?



Solution 1:[1]

You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are {% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.

{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>

Solution 2:[2]

What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.

 {% load static %}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
 
  <h1 class="text-3xl font-bold">
    Hello, world!
  </h1>
  
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 simple_code
Solution 2 Jattanjie21