I have a very default Tailwind CSS configuration in a Pelican theme, and everything seems to work except for the CSS break point overrides. I set it up using the tailwind cli/npm method.
The text should be changing to green after the medium break point is hit, but it stays blue.
<div class="text-center">
<address id="about" class="text-xs py-3 text-blue-400 md:text-green-400">
Proudly powered by <a href="https://getpelican.com/">Pelican</a>,
which takes great advantage of <a href="https://www.python.org/">Python</a>.
</address>
</div>
Also seeing this issue with container padding.
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");
module.exports = {
content: ["./templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}
And for my css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
I have tried RTFM and searching SO, but a lot of those answers seem to be around not understanding the mobile-first design. But that's not the case here. It's like it's not bundling the responsive styles in, and I can't figure out why.
npx tailwind -i ./styles.css -i ./static/styles.min.css --watch
should be
npx tailwind -i ./styles.css -o ./static/styles.min.css --watch
Notice the -i and -o.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments