skills.rest
JCETools-Petra
JCETools-PetraCOMMUNITY
Explore all skills by this author →
GitHub

tailwind

Configure Tailwind CSS 3.x and 4.x themes, dark mode, and responsive utilities.

16|Updated Apr 30, 2026
Search Tags:#tailwindcss#responsive-design#dark-mode#css-first#theme-tokens#react-utilities
One-click install
npx skills add https://github.com/JCETools-Petra/JCE-Opencode-Tools --skill tailwind-jcetools-petra
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/JCETools-Petra/JCE-Opencode-Tools/tree/main/config/skills/tailwind
Command: npx skills add https://github.com/JCETools-Petra/JCE-Opencode-Tools --skill tailwind-jcetools-petra

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind configuration and implementation can become inconsistent, hard to theme, and error-prone—especially when supporting responsive layouts and dark mode across Tailwind versions.

Core Features & Use Cases

  • Tailwind 4 CSS-first configuration: Set design tokens and theme values via CSS using @theme and Tailwind’s @import workflow.
  • Responsive design strategies: Apply mobile-first breakpoints and use container queries for component-scoped responsiveness.
  • Dark mode implementations: Choose class-based, media-based, or hybrid strategies to reliably adapt UI themes.
  • Integration patterns: Use cn() with tailwind-merge and clsx to safely compose dynamic class strings in React/Vue components.
  • Performance guidance & guardrails: Prefer Tailwind 4 optimizations, enforce consistent class ordering, and avoid anti-patterns like excessive @apply or arbitrary-value sprawl.

Quick Start

Use the tailwind skill to configure dark mode and responsive utility classes for your UI from the current Tailwind configuration and component files.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I configure Tailwind CSS 4 using a CSS-first approach?▼

To configure Tailwind CSS 4 CSS-first, define your design tokens and theme values directly in CSS using the @theme directive and Tailwind’s @import workflow rather than relying on a JavaScript config file.

How do I implement dark mode in Tailwind CSS?▼

Dark mode in Tailwind CSS can be implemented using class-based, media-based, or hybrid strategies. This ensures reliable UI theme adaptation by defining specific dark variants within your configuration.

What is the best way to compose dynamic class strings in React with Tailwind?▼

The best way to compose dynamic class strings in React is using the cn() utility combined with tailwind-merge and clsx. This pattern safely merges classes and resolves conflicts when building components.

Does this Tailwind CSS guidance support responsive container queries?▼

Yes, this Tailwind CSS guidance supports responsive design strategies by applying mobile-first breakpoints and utilizing container queries for component-scoped responsiveness.

What are common Tailwind CSS anti-patterns I should avoid?▼

Common Tailwind CSS anti-patterns to avoid include excessive use of @apply and arbitrary-value sprawl. Enforcing consistent class ordering and preferring Tailwind 4 optimizations helps maintain performance.

Related Skills

Explore More Design & Creative Skills→
FortiumPartnersFortiumPartners

styling-with-tailwind

Apply Tailwind CSS 3.x utility classes for responsive UI styling and theme configuration.

Official
Intermediate
jtgironjtgiron

tailwind-css-patterns

Standardize Tailwind CSS styling for responsive React, Vue, and Svelte components.

Community
Intermediate
acquiaacquia
16

canvas-styling-conventions

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

Official
Intermediate
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate