2

I have a project where I'm using Django as backend and tailwind for the css. tailwind is not giving me any errors and is finding classes in my files but not generating the css. the only class that its working for is bg-blue-500 and nothing else. if anyone could think of why this may be happening or how to fix is I would really appreciate it.

html page

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Auctions{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'auctions/output.min.css' %}">
    </head>
    <body>
        <h1>Auctions</h1>
        <div>
            {% if user.is_authenticated %}
                Signed in as <strong>{{ user.username }}</strong>.
            {% else %}
                Not signed in.
            {% endif %}
        </div>
        <ul class="nav">
            <li class="nav-item  bg-red-500">
                <a class="nav-link" href="{% url 'activeListings' %}">Active Listings</a>
            </li>
            {% if user.is_authenticated %}
                <li class="nav-item bg-blue-500">
                    <a class="nav-link" href="{% url 'logout' %}">Log Out</a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Log In</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'register' %}">Register</a>
                </li>
            {% endif %}
        </ul>
        <hr>
        {% block body %}
        {% endblock %}
    </body>
</html>

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-4xl;
    }
    h2 {
        @apply text-3xl;
    }
    h3 {
        @apply text-2xl;
    }
    h4 {
        @apply text-xl;
    }

}

package.json

        {
          "name": "jstools",
          "version": "1.0.0",
          "description": "",
          "main": "tailwind.config.js",
          "scripts": {
            "build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "dependencies": {
            "autoprefixer": "^10.4.12",
            "clean-css-cli": "^5.6.1",
            "tailwindcss": "^3.1.8"
          }
        }

tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
},
content: {
    enabled: false, //true for production build
    content: ['../../templates/auctions/*.html', '../../templates/**/*.html']
},
theme: {
    screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px'
    },
    
    extend: {},
},
variants: {},
plugins: [],
}

file structure

Dunham
  • 101
  • 3
  • When you running build script does console told you something about content section of your config? – Ihar Aliakseyenka Oct 21 '22 at 16:30
  • > jstools@1.0.0 build > tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css warn - The `purge`/`content` options have changed in Tailwind CSS v3.0. warn - Update your configuration file to eliminate this warning. warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources Done in 70ms. – Dunham Oct 22 '22 at 01:43
  • You have outdated config for v2 with some corrections while using v3 (I'm more surprised some classes were compiled). Proceed to the link console gave you and correct configuration file – Ihar Aliakseyenka Oct 24 '22 at 09:57
  • @Ihar Aliakseyenka thanks for the response. I fixed my config file and I am no longer getting a error when I run build. I now have a problem now where I have to run rpm build every time I make a change to my templates. can you think of any reason this might be happening? thanks for your help. – Dunham Oct 24 '22 at 13:39
  • Usually you need to add `--watch` flag to build CSS script like [here](https://tailwindcss.com/docs/installation) step four. – Ihar Aliakseyenka Oct 24 '22 at 14:22

1 Answers1

2

Because there's no nav-item nav-link or nav in tailwindcss you can look at the tailwindcss documentation for the available css classes that you can use.

You can also register your own component by adding it to the tailwind config file or directly to the css file

@layer components {
    .nav-item {
        @apply 'tailwind css classes'
    }
}
xenooooo
  • 1,106
  • 1
  • 2
  • 8
  • sorry the nav is some bootstrap code that someone else has written I wasn't expecting it the work. if you look at the nav class though you'll see bg-blue-500 and bg-red-500. the bg-blue-500 class is woking but not the red. – Dunham Oct 21 '22 at 12:01