Search code examples
tailwind-csstailwind-3

tailwind responsive design not working with prefix enabled

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

  • config
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
  prefix:"tw-"
}
Solution

  • 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: or hover: 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>