tailwind-4

Provide Tailwind CSS styling patterns using the cn() utility and CSS custom properties.

2|Updated Aug 2, 2023

Search Tags:#css #styling #responsive #tailwind #utility classes #cn

Ready to run

npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill tailwind-4-ic-facet

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/ic-facet/gestion-programas-asignatura/tree/main/.cursor/skills/tailwind-4
Command: npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill tailwind-4-ic-facet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear guidelines and best practices for using Tailwind CSS effectively, preventing common styling pitfalls and ensuring maintainable code.

Core Features & Use Cases

Styling Decision Tree: A flowchart to guide styling choices.
Critical Rules: Emphasizes avoiding var() in classNames and hex colors.
cn() Utility Usage: Explains when and how to use the clsx and twMerge utility.
Dynamic Values & Theming: Demonstrates using style props and CSS custom properties.
Common Patterns: Provides examples for Flexbox, Grid, Spacing, Typography, Borders, States, Responsive design, and Dark Mode.

Quick Start

Follow the styling decision tree to apply Tailwind CSS classes correctly.

Frequently Asked Questions about tailwind-4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I merge conditional Tailwind CSS classes without style conflicts?▼

Avoid using `var()` directly in Tailwind CSS classNames or passing hex colors as utility values. Instead, use inline `style` props or CSS custom properties for dynamic theming to ensure maintainable styling code.

What's the best way to handle dynamic values in Tailwind CSS?▼

For dynamic values in Tailwind CSS, apply inline `style` props and CSS custom properties rather than constructing utility class strings dynamically. This approach prevents purging issues and maintains styling best practices.

Can I use Tailwind CSS utility classes with component libraries that don't accept class names?▼

When integrating Tailwind CSS with libraries that do not accept class names, you must wrap the components or apply styles using alternative methods like CSS custom properties or inline `style` props to inject styling.

What are common Tailwind CSS patterns for responsive design and dark mode?▼

Tailwind CSS provides specific utility patterns for responsive design and dark mode, alongside common layouts using Flexbox and Grid. Following a styling decision tree helps apply these state and breakpoint utilities correctly.