### Peer Selectors ```tsx // Style based on descendants of a peer

Hover,click me hidden on hover hidden on active

```

{"{"} Hove here Click here{"} "}{" "} explore hover effect{" "} explore active effect

### has hover Selectors ```tsx

try hovering the hover me →{" "} hover me only ← and observe

```

try hovering the hover me →{" "} hover me ← and observe

### Custom Breakpoints ```tsx // Apply styles when viewport is at most 1000px wide

Observer the color of this text

```

Now try resizing the window and observe below

Observer the color of this text

### Text clamp ```tsx

Type Shit

```

Now try resizing the window and see the max size of font is 180px the min is 45px and else is relative to screen size cool right ?

Type Shit

{/* */} ### group selector ```tsx // Scale down when clicked/active

try hovering the whole group the link and observe

```

try hovering the whole group the link and observe

### Child Data Selectors ```tsx // Select any element with data-slot=' a' (note the space)

This will have red background

```

This will have red background

### Descendant Data Selectors ```tsx

This will have red background too

```

This will have red background too

### Descendant Selectors ```tsx // Typical approach

CSS Great
Tailwind Fine

// with child selector approach

CSS Great
Tailwind Fine

// Select direct child with attribute selector

Direct child with green background

``` ### Direct Descendant Selectors [&> ]: ```tsx // Target Direct Decendent only elements

Title (2xl)

Content (gray)

```

Title (2xl)

Content (gray)

### Nth Child Selectors ```tsx

{item}

```

{item}

### Sibling Selectors ```tsx // Target all following siblings

First

Second (gray text)

Third (gray text)

```

First

Second (gray text)

Third (gray text)

### Text Truncation with Line Clamp ```tsx // Show only 2 lines of text with ellipsis

This is a long text that will be truncated after 2 lines...

``` ### Active State Scaling ```tsx // Scale down when clicked/active ```

### Placeholder Styling ```tsx // Style input placeholders ``` ### Caret Color ```tsx // Customize text cursor color ``` ### After Pseudo-element with Inset to increase hit area ```tsx // After with inset positioning

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

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

```

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

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

### After Bottom Line with Animation ```tsx // Animated bottom line using before pseudo-element ``` ### Outline and Outline Offset ```tsx // Outline with offset

Outline with 2px offset

``` ### 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. ```tsx export function BreakpointIndicator() { if (process.env.NODE_ENV === "production") return null; return (

2xl

); } ``` ```bash npx shadcn add @skiper-ui/skiper65 ```

Bootstrapping Guide

Lil tips

Animation Basics

Animation Physics

Cost Optimization