Style Conflict between Nextra and TailwindCSS

[vineetver]

Description

We are experiencing a style conflict when using Nextra with TailwindCSS. Specifically, Nextra's focus-visible styles are causing unexpected styling issues.

Steps to Reproduce

1. Create a new project using Nextra.
2. Add TailwindCSS to the project.
3. Add code for Menu.

Example

The dropdown menu items styled with TailwindCSS are being overridden/merged by Nextra's styles, resulting in an unwanted outline, ring, or border:

For instance, this is Nextra's focus style:

Code

menu.tsx

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import {Check, Circle} from "lucide-react"
import {cn} from "~/lib/util";

const Menu = DropdownMenuPrimitive.Root

const MenuTrigger = DropdownMenuPrimitive.Trigger

const MenuPortal = DropdownMenuPrimitive.Portal

// Left/right padding 12px
const MenuContainer = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({className, sideOffset = 4, ...props}, ref) => (
    <DropdownMenuPrimitive.Portal>
        <DropdownMenuPrimitive.Content
            ref={ref}
            sideOffset={sideOffset}
            className={cn(
                "z-50 min-w-[112px] max-w-[280px] overflow-hidden rounded-[4px] shadow-md border bg-surface-container-low py-[4px] text-on-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                className
            )}
            {...props}
        />
    </DropdownMenuPrimitive.Portal>
))
MenuContainer.displayName = DropdownMenuPrimitive.Content.displayName

const MenuListItem = React.forwardRef<
    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
}
>(({className, inset, ...props}, ref) => (
    <DropdownMenuPrimitive.Item
        ref={ref}
        className={cn(
            "relative flex h-[48px] px-[12px] cursor-default items-center outline-none border-0 transition-colors focus:outline-none focus:ring-0 focus:border-0 focus:bg-transparent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
            "focus:bg-secondary-container focus:text-on-secondary-container",
            inset && "pl-8",
            className
        )}
        {...props}
    />
))
MenuListItem.displayName = DropdownMenuPrimitive.Item.displayName

export {
    Menu,
    MenuTrigger,
    MenuContainer,
    MenuListItem,
    MenuSelectItem,
    MenuPortal,
}

menu.mdx

import {
    Menu,
    MenuContainer,
    MenuListItem,
    MenuDivider,
    MenuTrigger,
} from "~/components/menu";
import { Container } from "~/components/container";

## Dropdown Menu

<Container>
    <Menu>
        <MenuTrigger>Open</MenuTrigger>
        <MenuContainer>
            <MenuListItem>Item 1</MenuListItem>
            <MenuListItem>Item 2</MenuListItem>
            <MenuListItem>Item 3</MenuListItem>
            <MenuDivider/>
            <MenuListItem>Item 4</MenuListItem>
        </MenuContainer>
    </Menu>
</Container>

util

import { type ClassValue, clsx } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return customTwMerge(clsx(inputs));
}

[dimaMachina]

closed by #3220 and #3248, use https://github.com/shuding/nextra/releases/tag/nextra-theme-docs%403.0.0-alpha.39