Trying to use tailwind v4 alongside bootstrap

[Keith-Web3]

I have a codebase that was built using react and bootstrap. I'm currently trying to migrate it to NextJS + taiilwind. I've looked around and seems the best way to do this is to set preflight to false and add a tw prefix to prevent conflicting classNames with bootstrap.
From the v4 docs, I figured this would be the right way to do it:

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw);

But for some reason, it's not working. I'm getting an intellisense error on prefix(tw) and the styles are not being applied. If I replaced the code with just:

@import "tailwindcss"

It works. But if I do:

@import "tailwindcss" prefix(tw);

It doesn't work anymore even when I add the prefix.
I would really appreciate if I can be pointed in the right direction in case I'm doing something wrong.

[wongjn]

The correct CSS would be:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
@import 'tailwindcss/utilities.css' layer(utilities);

To be clear, you'd also then need to add the prefix to all the Tailwind classes yourself in markup/templates:

-<h1 class="text-3xl font-bold underline">
+<h1 class="tw:text-3xl tw:font-bold tw:underline">