Anti-Patterns: Should Flag

Every example on this page should be detected by the anti-pattern scanner.

Tailwind Side-Tab

border-l-4 + rounded-r

The classic AI tell.

border-l-2 + rounded-r

Thin but still recognizable with rounded corners.

border-r-4 + rounded-l

Right side variant.

border-s-3 + rounded-r

Logical inline-start.

border-e-8 + rounded-l

Logical inline-end, extra thick.

CSS Side-Tab

border-left: 4px solid

CSS shorthand.

border-right: 5px solid

CSS shorthand right.

border-left-width: 3px

CSS longhand.

border-right-width: 6px

CSS longhand right.

border-inline-start: 4px solid

CSS logical start.

border-inline-end: 3px solid

CSS logical end.

border-inline-start-width: 5px

CSS logical longhand.

Top/Bottom + Rounded

border-t-4 + rounded-lg

Top accent on rounded card.

border-b-4 + rounded-xl

Bottom accent on rounded card.

border-t-2 + rounded-md

Even thin top border on rounded.

CSS border-top + border-radius

Top border from style block.

CSS border-bottom + border-radius

Bottom border from style block.

Dark Mode

Dark card + border-l-4 + rounded

Dark background doesn't make the side-tab OK.

Dark card + border-t-2 + rounded

Top accent on dark rounded card.

Dark CSS card + side border + radius

Inline dark card with side-tab.