CODEWITHSUNDEEP
cssdjangoconfigtailwind-csstailwind-in-js
Dunham
Dunham

Reputation: 71

why are only some css classes being generated in tailwind?

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

Upvotes: 2

Views: 969

Answers (1)

xenooooo
xenooooo

Reputation: 1216

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

Upvotes: 2

Related Questions