Cannot display different images at different responsive breakpoint

[carpincho]

Hi there,
I'm trying to display different images based on the different breakpoints that tailwindcss provides.
For some reason I can't understand my code is not working.
I tried almost same snippet at play.tailwindcss.com and works perfectly.

In my code I am only seeing the first breakpoint correctly, the rest remains hidden.

The snippet goes like this:

<div class="h-96 bg-red-200">
    <div class="block sm:hidden md:hidden lg:hidden">xs devices</div>
    <div class="hidden sm:block md:hidden lg:hidden">sm devices</div>
    <div class="hidden sm:hidden md:block lg:hidden">md devices</div>
    <div class="hidden sm:hidden md:hidden lg:block">lg and bigger devices</div>
</div>

Actually, my real snippet apply these classes to imgs elements

I searched for these classes definition in my generate tailwindcss css file and they are there.

My tailwind.config.js file contains the following:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    future: {},
    experimental: {
        extendedSpacingScale: true,
        defaultLineHeights: true,
        uniformColorPalette: true, /* new tailwindcss color palette*/
        applyComplexClasses: true,
    },
   
    variants: {
        textColor: ['responsive', 'hover', 'focus', 'group-focus', 'active'],
        backgroundColor: ['responsive', 'hover', 'focus', 'group-focus', 'active'],
        cursor: ['responsive', 'hover', 'focus'],
        display: ['responsive', 'hover', 'focus'],
        outline: ['responsive', 'focus', 'hover', 'active'],
    },
    plugins: [],
};

I'm running tailwindcss 1.9.2

Is there something I'm missing?
Thanks!

[carpincho]

I found the bug.
I was importing (unintentionally) Foundation lib which was overriding visibility and hidden classes.