skills.rest
PMN123
PMN123COMMUNITY
Explore all skills by this author →
GitHub

jac-cl-styling

Implements Tailwind v4 setup, conditional classes, cn() utility, and scoped CSS for Jac client components.

Updated Jul 26, 2026
Search Tags:#frontend#css#components#styling#tailwind#clsx#jac
One-click install
npx skills add https://github.com/PMN123/trapdoor --skill jac-cl-styling-pmn123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jac-cl-styling
Source: https://github.com/PMN123/trapdoor/tree/main/.agents/skills/jac-cl-styling
Command: npx skills add https://github.com/PMN123/trapdoor --skill jac-cl-styling-pmn123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, clsx, tailwind-merge.

What problem does it solve? Styling Jac client components requires knowing several distinct mechanisms—Tailwind v4 Vite plugin setup, conditional class logic, the cn() merge utility, semantic color tokens, and auto-scoped .style.css annex files—and using the wrong one for a project type (plain vs jac-shadcn) causes specificity conflicts and broken styles. ## Core Features & Use Cases - Tailwind v4 Setup: Three-step installation for non-shadcn projects using @tailwindcss/vite, jac.toml plugin registration, and a single @import "tailwindcss" entry CSS with no tailwind.config.js. - Scoped CSS Annex Files: Pair a Card.style.css file with Card.jac by base name to get compiler-hashed, auto-scoped classes with :global() opt-out—no imports needed. - cn() Utility: A Jac implementation combining clsx and tailwind-merge for conditional and merged Tailwind classes, with guidance on when to import it from lib/utils.jac in shadcn projects. - Use Case: When building a tabbed interface in a Jac app, use Python-style ternaries and string concatenation to switch border and text colors based on the active state, while semantic tokens like text-muted-foreground keep the component dark-mode compatible. ## Quick Start Ask the AI to add Tailwind v4 styling to your Jac project and write a component with conditional classes using the cn() utility.

Frequently Asked Questions about jac-cl-styling

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

FAQPage Schema
How do I set up Tailwind v4 in a Jac project?▼

Run jac install --npm --dev tailwindcss @tailwindcss/vite, register the tailwindcss() plugin under [client.vite] in jac.toml, and add @import "tailwindcss" to your entry CSS file. No tailwind.config.js is needed in v4. jac-shadcn projects already have Tailwind pre-wired.

How do I write conditional classes in Jac components?▼

Use Python-style ternary expressions (A if cond else B) with string concatenation in className. For merging multiple conditional classes, use the cn() utility built on clsx and tailwind-merge, passing each class as a separate argument.

Can I use .style.css scoped files in jac-shadcn projects?▼

No, .style.css annex files are an anti-pattern in jac-shadcn projects because they conflict with the cn() plus Tailwind utility system and create specificity issues. Use cn() with Tailwind utilities and semantic tokens instead.

How does scoped CSS work in Jac components?▼

Create a .style.css file with the same base name as your component, such as Card.style.css for Card.jac. The compiler hashes declared classes and rewrites matching className literals automatically, with no import statement required. Use :global(...) to opt out of scoping.

Why should I avoid hardcoded colors like text-gray-900 in Tailwind projects?▼

Hardcoded hex and gray values do not adapt to themes or dark mode. Use semantic tokens like text-foreground, bg-background, text-muted-foreground, and text-destructive, which adjust automatically across theme changes.

Why does my global CSS reset break Tailwind spacing utilities?▼

A * { margin: 0; padding: 0 } reset in global.css conflicts with Tailwind's Preflight and collapses spacing utilities. After @import "tailwindcss", only add :root variable blocks and @theme inline registrations to global.css.

Related Skills

Explore More Software Engineering Skills→
nihalnihalaninihalnihalani

jac-cl-styling

Implements Tailwind v4 setup, conditional classes, cn() utility, and scoped CSS for Jac client components.

Community
Intermediate
jeffwweeejeffwweee

nextjs-frontend

Develop Next.js 14+ frontends with App Router, TypeScript, and React 18.

Community
Advanced
nihalnihalaninihalnihalani

jac-shadcn-components

Compose Jac UI pages from shadcn primitives installed via jac install --shadcn.

Community
Advanced
wolfstar-projectwolfstar-project

improve-codebase-architecture

Scan a codebase for module deepening opportunities and present them as a visual HTML report.

Official
Advanced