Lil tips

Uncommon Tailwind css classes

Breakpoint Indicator

The first thing i do before starting a new project is to add this component to the layout.tsx so i can see the current breakpoint and adjust the design accordingly. and the best part if i forget to remove it in production with vercel automaticaly removes it as its in the production build.

export function BreakpointIndicator() {
  if (process.env.NODE_ENV === "production") return null;

  return (
    <div className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
}

npx shadcn add @skiper-ui/skiper65

has hover

<div className="has-[span:hover]:text-foreground/10">
  try hovering the hover me →{" "}
  <span className="hover:text-foreground"> hover me only </span>← and observe
</div>

try hovering the hover me → hover me ← and observe

group selector

// Scale down when clicked/active
<div className="group/link">
  try hovering the whole group
  <span className="group-hover/link:text-foreground/10"> the link </span> and
  observe
</div>

try hovering the whole group the link and observe

Text Truncation with Line Clamp

// Show only 2 lines of text with ellipsis
<div className="line-clamp-2">
  This is a long text that will be truncated after 2 lines...
</div>

Child Selectors

<ul>
  {["Item 1", "Item 2", "Item 3", "Item 4","Item 5"].map((item, index) => (
    <li
      key={index}
      className="border-foreground/40 odd:bg-foreground/5  even:bg-foreground/12 first:border-t  p-3  last:border-b"
    >
      {item}
    </li>
  ))}
</ul>

Item 1
Item 2
Item 3
Item 4
Item 5

Active State Scaling

// Scale down when clicked/active
<button className="transition-transform ease-in-out active:scale-95">
  Click me!
</button>

Placeholder Styling

// Style input placeholders
<input
  className="placeholder:italic placeholder:text-gray-400"
  placeholder="Enter your text..."
/>

Caret Color

// Customize text cursor color
<input className="caret-blue-500" />

After Pseudo-element with Inset to increase hit area

// After with inset positioning
<div className="relative p-4 bg-muted after:content-[''] after:absolute after:inset-2 after:bg-blue-500 after:opacity-20">
  After with inset-2 (8px from all sides)
</div>

<div className="relative p-4 bg-muted after:content-[''] after:absolute after:inset-3 after:bg-green-500 after:opacity-20">
  After with inset-3 (12px from all sides)
</div>

After with inset-2 (8px from all sides)

After with -inset-3 (-12px from all sides)

After Bottom Line with Animation

// Animated bottom line using before pseudo-element
<button className="relative before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:h-[0.05em] before:w-full before:origin-right before:scale-x-0 before:bg-current before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)] before:content-[''] hover:before:origin-left hover:before:scale-x-100">
  hover me
</button>

Outline and Outline Offset

// Outline with offset
<div className="bg-muted p-4 outline outline-2 outline-offset-2 outline-blue-500">
  Outline with 2px offset
</div>

Go Back