Tailwind CSS Missing Breakpoints

Professor Tweetzer

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.

Professor Tweetzer
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.

edited at
0

Comments

0 comments
Login to comment

Related