Does it include support for Tailwind CSS v4?

Yes, it includes modern patterns compatible with v4, such as subgrid utilities, @theme-based z-index management, and @utility definitions.

Can I use this for complex interactive elements like carousels?

Yes, it provides specific implementations for Scroll Snap and overflow management to create high-performance, CSS-only carousels and sliders.

How does it handle component-level responsiveness?

The skill provides comprehensive patterns for Container Queries, allowing UI components to change their layout based on the size of their parent container rather than just the browser viewport.

What layout systems does this Tailwind skill support?

It supports advanced CSS Grid (including Holy Grail and Area templates), Flexbox distribution, Container Queries, and Multi-column text layouts.

Does it address RTL (Right-to-Left) support?

Yes, it includes guidance on using CSS Logical Properties (like ps-* and pe-*) to ensure layouts work seamlessly across different text directions.

Tailwind CSS Advanced Layouts

Name: Tailwind CSS Advanced Layouts
Author: JosiahSiegel

byJosiahSiegel

•

デザインツール

Implements sophisticated CSS Grid, Flexbox, and Container Query patterns using Tailwind CSS for professional-grade responsive interfaces.

概要

This skill acts as an expert architectural guide for building complex web layouts within the Tailwind CSS ecosystem. It provides specialized implementation patterns for high-level structures like Holy Grail layouts and dashboard grids, as well as micro-layout techniques including scroll snapping, aspect-ratio control, and container queries. By leveraging modern CSS features like subgrid and logical properties, the skill helps developers move beyond basic utility usage to create highly performant, accessible, and maintainable frontend designs that respond intelligently to both viewport and container dimensions.

主な機能

Advanced scroll management including snapping, margins, and custom scrollbars
Flexible Flexbox patterns for masonry layouts and dynamic item sizing
Modern Container Query implementation for component-driven responsiveness
Mastery of complex CSS Grid architectures including Template Areas and Subgrid
Strategic z-index and positioning management for complex UI layering
7 GitHub stars

ユースケース

Developing media-rich landing pages with scroll-snap carousels and fluid aspect ratios
Building intricate SaaS dashboards with multi-panel layouts and sticky navigation
Creating component libraries that adapt to varying container widths using Container Queries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add josiahsiegel/claude-plugin-marketplace tailwindcss-advanced-layouts

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要