'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 |