When using prefix:"tw-"
in tailwind.config.js
hidden
with breakpoint not working.
Using : https://play.tailwindcss.com/
<div class="tw-md:hidden">hello</div>
div does not get hidden
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
// ...
},
},
plugins: [],
prefix:"tw-"
}
As per the documentation:
It’s important to understand that this prefix is added after any variant modifiers. That means that classes with responsive or state modifiers like
sm:
orhover:
will still have the responsive or state modifier first, with your custom prefix appearing after the colon:<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500"> <!-- --> </div>
So for your situation, it would be md:tw-hidden
:
tailwind.config = { prefix: 'tw-' }
<script src="https://cdn.tailwindcss.com/3.4.4"></script>
<div class="md:tw-hidden">hello</div>