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 :)
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
Should be able to find the template files then and generate the classes.