I started a project with TailwindCSS v2.2x. I saw a video showing TailwindCSS v3 new features and I want to use the Just-In-Time one. I followed the upgrade video guide but nothing is working... As the release of this version is quite recent, I didn't find detailed guides for my problem.
Here's my tailwind.config.js
file:
module.exports = { content: ['./templates/**/*.{html,js}'], theme: { extend: { colors: {'gris-hover': '#afafaf','rose-footer': '#f6e7e6', }, }, }, plugins: [],}
Here is the <head>
of my base.html
file :
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="{{url_for('static',filename='css/output.css')}}" /><title>{% block title %}{% endblock %}</title></head>
When I run my dev server (using Flask
), all the CSS class that I wrote in my html page don't compile into the output.css
file.
And here are my files for my project :
I don't really know what I did wrong since the Just-In-Time engine is included right in Tailwind CSS v3 itself (as written in the just-in-time engine documentation).