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?
Add a comment
|
2 Answers
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>
5 Comments
Maxim Siebert
This works locally, but once I deploy to production the stylesheet at
/static/css/dist/styles.css which is included by {% tailwind_css %} doesn't exist since this folder only exists in the theme app. Any idea how to fix this? Should I simply change my STATIC_URL to point to the theme app static folder?Maxim Siebert
After further testing, it looks like
python manage.py collectstatic does collect the tailwind css file in theme, but it is not accessible. When I create a styles.css in my_app/static/styles.css I'm able to load it in production with <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}"> but I am unable to load the stylesheet at <link rel="stylesheet" href="/static/css/dist/styles.css"> generated by {% tailwind_css %}. When I try to open the tailwind stylesheet in a new tab I get a 404.Maxim Siebert
FYI - I was able to get this working by removing the
css/dist directories in package.json. Removing {% tailwind_css %} and just linking to the stylesheet with {% static 'styles.css' %} after listing the theme static directory in the settings like suggested here - stackoverflow.com/a/51966704/1748562
GCMeccariello
Hello Maxim, I got the exact same problem. I deleted the
css/distin the "build:clean", "build:tailwind" and "build:dev". The location is theme/static/styles.css. But it still does not work. Could you specify your solution?
Tomislav Mikulin
For me in production it worked with just running the collectstatic command, I am though using the django tailwind lib.
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>