skills.rest
ic-facet
ic-facetOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill tailwind-4-ic-facet
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate
doanchienthangdevdoanchienthangdev
4

styling-with-tailwind

Style user interfaces with Tailwind CSS utility classes and responsive breakpoints.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic