2

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?

Anjayluh
  • 1,647
  • 1
  • 13
  • 22

2 Answers2

3

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>

simple_code
  • 707
  • 9
  • 24
  • 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 May 11 '22 at 01:21
  • 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 `` but I am unable to load the stylesheet at `` generated by `{% tailwind_css %}`. When I try to open the tailwind stylesheet in a new tab I get a `404`. – Maxim Siebert May 11 '22 at 02:33
  • 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 - https://stackoverflow.com/a/51966704/1748562 – Maxim Siebert May 11 '22 at 18:59
  • Hello Maxim, I got the exact same problem. I deleted the `css/dist`in 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? – GCMeccariello Sep 21 '22 at 08:55
  • For me in production it worked with just running the collectstatic command, I am though using the django tailwind lib. – Tomislav Mikulin Aug 18 '23 at 04:12
0

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>
Jattanjie21
  • 1
  • 1