CODEWITHSUNDEEP
tailwind-csstailwind-3
Hexgear
Hexgear

Reputation: 322

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

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

Upvotes: 0

Views: 195

Answers (1)

Wongjn
Wongjn

Reputation: 24408

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>

Upvotes: 1

Related Questions