Tailwind CSS rules not working with included files!

fspjonny commented 2 years ago

I can't say it's a bug, but I have this issue unresolved, but feel free to close this ticket if it's not a valid issue!

When I include pieces of HTML in my project, Tailwind's CSS rules are not working.

parts files are in STATICFILES_DIRS

{% extends 'base.html' %}
{% block title %}Task | List{% endblock %}
{% block header %}
    {% include 'parts/header.html' %}
{% endblock %}
...

But if I put the whole piece of code inside the "block header" tag, it works perfectly!

{% extends 'base.html' %}
{% block title %}Task | List{% endblock %}
{% block header %}
<div class="h-32 flex flex-wrap text-center content-center">
    <div class="bg-slate-300 mx-auto">
        <p class="text-3xl lg:text-5xl font-extrabold tracking-tight text-indigo-600 text-shadow">Django + Tailwind =
            ❤️😃❤️</p>
    </div>
</div>
{% endblock %}
...

To make this work across my entire project, I would need to put the same code snippet on every page. This is not good, I broke the DRY principle. Is there any way to make this work using "{% inlude %}" ?

nigelcopley commented 2 years ago

off the top of my head, with the limited info, i would say you're not including your includes templates in the config https://django-tailwind.readthedocs.io/en/latest/installation.html#optional-configurations

I use includes files and they work fine. If you can share your structure, can probably help more

fspjonny commented 2 years ago

This is my base.html template for the others part page's. The another parts, are included or inherited throught the block tag template language, basically this is what i use. Did you find something wrong with my structure?

ddrake commented 1 year ago

First of all, thanks for an excellent library! Secondly, I think I might have some idea what's going on here... (... or not. See EDIT below)

A typical Django application structures template directories something like the following tree, where myapp is a Django app with its templates stored in myprojectdir/myapp/templates/myapp:

myprojectdir
├── LICENSE
├── myapp
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── templates
│   │   └── myapp
│   │        ├── base.html
│   │        └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── README.md
├── theme
│   ├── static_src
        └── tailwind.config.js

In this example, myprojectdir/myapp/templates/myapp has a base.html template and an index.html template that extends base.html, but for me, with the default tailwind.config.js, only tailwind tags/styles that used in base.html were available in index.html. The default tailwind.config.js file looks something like this:

module.exports = { content: [ /* Templates within theme app (/templates), e.g. base.html. / '../templates/**/*.html', /* Main templates directory of the project (BASE_DIR/templates). */ '../../templates/**/*.html', /* Templates in other django apps (BASE_DIR//templates). */ '../../**/templates/**/\.html', ... }

I added this (hardcoded) line to the file: '../../myapp/templates/myapp/*.html',

... and then I was able to get Tailwind styles in index.html that were not in base.html.

I don't really understand why that last pattern, '../../**/templates/**/*.html', with ** indicating any number of directories, didn't match -- Just letting you know what I saw.

Here's my (simplified) base.html: {% load static tailwind_tags %}

<!DOCTYPE html>
<html lang="en">
  <head>
    {% block title %}
      <title>IFBT</title>
    {% endblock %}
    <meta charset="UTF-8">
          ...
    {% tailwind_css %}
  </head>
  <body class="bg-gray-50 font-serif leading-normal tracking-normal">
    <div class="container mx-auto">
      <section class="flex items-center justify-center h-screen">
        {% block content %}
        {% endblock %}
      </section>
    </div>
  </body>
</html>

And here's my index.html:

{% extends 'myapp/base.html' %}
{% block content %}
<p class="text-green-400 text-3xl">Hello</p>
{% endblock %}

EDIT: I apologize for any confusion I may have created here. I commented out the edit I previously made to tailwind.config.js

/*
        ../../myapp/templates/myapp/*.html,
*/

and all tailwind styles continued to work in index.html. I was able to change styles in that template to new tailwind styles not previously-defined in base.html or index.html, and they worked as expected. I'm not sure what my original problem was, but I suspect that either the Tailwind styles I used in index.html were not valid (e.g. text-3lg) or I may have forgotten to do ./manage.py tailwind start when I was having the issue.

ddrake commented 1 year ago

In my case, this was caused by one of two things:

An error in a tailwind style tag or in the HTML.
The browser was caching my styles.css. In Firefox, the cache can be cleared by \<ctrl>+\<shift>+R. To verify whether or not this is your issue, you can compare the styles.css file in your browser tool (style editor > open in new tab) with the one in myprojectdir/theme/static/css/dist/. Several times, I was adding new tailwind tags to included files which represented styles not in the base template, then seeing the tailwind tags appear correctly in the markup in the browser tool, but not seeing the correct generated css in the browser.

timonweb / django-tailwind

Tailwind CSS rules not working with included files! #143