Create an Infinite Horizontal Scroll Animation with Tailwind CSS

Creating a Progress Bar with Tailwind

Hướng dẫn từng bước tạo thanh tiến trình (progress bar) bằng TailwindCSS.

Lập trình viên cần đọc bài này để nhanh chóng tích hợp các thành phần UI hiện đại như thanh tiến trình vào dự án của mình mà không cần viết CSS thủ công, tiết kiệm thời gian và tăng hiệu suất phát triển.

Smarter Slice Spacing in Prismic

Three techniques for making Prismic slices respond intelligently to their surroundings: establishing a shared spacing baseline with a reusable Bounded component, auto-collapsing doubled gaps between adjacent slices with the same background using CSS sibling selectors, and reading slice data (index and neighbors) via SliceZone props to conditionally adjust padding. Code examples use React and Tailwind CSS but the patterns are framework-agnostic.

How to Build an Animated Badge Component with shadcn/ui

A step-by-step guide to building an animated badge component using shadcn/ui, Tailwind CSS, and Framer Motion (motion/react). Covers installing a pre-built badge from the Shadcn Space registry via CLI, then walks through wrapping the Badge component with motion.create(), adding layered radial-gradient glow effects, animating a check icon with easeOutBack spring physics, and staggering individual letter animations using Variants and custom index values. Includes a customization example showing how to create a blue 'Verified' variant by swapping colors and icons.

Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

A practical walkthrough of building embeddable widgets using React, Tailwind 4, Vite, and Web Components delivered as a single JS file. Two significant browser limitations are uncovered and solved: Tailwind 4's heavy reliance on CSS @property rules which Shadow DOM doesn't fully support, and @font-face declarations not working inside Shadow Roots. The @property issue is addressed with a custom PostCSS plugin (~300 lines) that transforms Tailwind's property registrations into concrete CSS variable declarations scoped to the shadow host. The font issue is handled by a runtime font loader using the FontFace API that attaches fonts to the parent document instead of the Shadow Root.