Tailwind -- CSS is not recognised in my project

Question

It's my first time using Tailwind CSS. For some reason, the styles I am trying to apply are not being recognised.

I ran npx tailwindcss init, to generate a tailwind.config.js. This is my file right now:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./templates/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

I created a src/input.css file with the following lines inside:

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

Then, I ran the command: npx tailwindcss -i ./src/input.css -o ./templates/css/style.css

With that, a file style.css is generated [But, I noticed that my Visual Studio Code does not recognizes it as a css file but a plain text file]

Now, this is the code of my templates/base.html file:

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="css/style.css">
</head>
{% include 'header.html' %}

    <main>
        {% block content %}
        {% endblock %}
    </main>

{% include 'footer.html' %}

and templates/header.html code:

<body> 
  <header class="bg-purple-100 sticky top-0 z-10 flex justify-between items-center px-4 py-2">
    <a href="{% url 'home' %}" class="text-white">HELLO WORLD</a>
    <div class="flex justify-between items-center space-x-4">
        <a href="" class="text-white">Search</a>
        <a href="" class="text-white">Airing</a>
        <a href="" class="text-white">Site theme</a>
        {% if user.is_authenticated %}
        <div class="dropdown">
            <button onclick="toggleDropdown()" class="dropbtn text-white">Profile</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="{% url 'profile' %}">Profile</a>
                <a href="{% url 'settings' %}">Settings</a>
                <a href="{% url 'notifications' %}">Notifications</a>
            </div>
        </div>
        {% endif %}
    </div>
</header>

After running the command: npx tailwindcss -i ./src/input.css -o ./templates/css/style.css --watch

This is the output I get:

**Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration`**

My folder structure, if it helps:

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── input.css
├── templates
│   ├── app1
│   │   ├── app1_1.html
│   │   ├── app1_2.html
│   │   └── app1_3.html
│   ├── css
│   │   └── style.css
│   ├── app2
│   │   └── app2_1.html
│   ├── base.html
│   ├── header.html
│   ├── footer.html
├── tailwind.config.js

How do I need to configure my Tailwind CSS config file correctly? Or is there another issue?

Thanks in advance :)

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Сергей Кох
– Сергей Кох, Commented Mar 25, 2024 at 8:18

Adam Phillips · Accepted Answer · 2024-03-25 03:26:35Z

0

It looks like Tailwind is not going deep enough to find the templates you are creating. Add another line to the content section something like

content: ['./templates/**/*.html'],

Should be able to find the template files then and generate the classes.

answered Mar 25, 2024 at 3:26

Adam Phillips

2432 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind -- CSS is not recognised in my project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related