skills.rest
remiconnesson
remiconnessonCOMMUNITY
Explore all skills by this author →
GitHub

tailwind

Enforce Tailwind CSS v4 migration-safe utilities, build settings, and design-token patterns.

Updated Apr 9, 2026
Search Tags:#theming#frontend#css#tailwind#tailwindcss#responsive-design#dark-mode
One-click install
npx skills add https://github.com/remiconnesson/insights-garden --skill tailwind-remiconnesson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/remiconnesson/insights-garden/tree/main/.agents/skills/tailwind
Command: npx skills add https://github.com/remiconnesson/insights-garden --skill tailwind-remiconnesson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you write, review, and refactor Tailwind CSS v4 code without falling into migration traps, broken utility syntax, or inefficient build setups. It centralizes the most important v4 conventions so teams can produce smaller CSS, cleaner markup, and more consistent design systems.

Core Features & Use Cases

  • Build and migration guidance: Choose the right v4 integration path for Vite, PostCSS, or CLI workflows and avoid deprecated configuration patterns.
  • Utility and syntax correction: Update renamed classes, variant stacking, opacity syntax, important modifiers, and CSS variable references to v4 standards.
  • Design system and theming patterns: Apply CSS-first configuration, semantic tokens, runtime variables, dark mode control, and responsive breakpoints.
  • Performance-focused refactoring: Reduce bundle bloat, simplify CSS generation, and favor built-in v4 features like container queries and logical properties.
  • Use case: A frontend team migrating a Next.js app to Tailwind v4 can use this Skill to audit existing classes, rewrite configuration, and standardize responsive and dark-mode patterns.

Quick Start

Ask the assistant to inspect your Tailwind CSS v4 files and refactor them to match the skill’s build, utility, theming, and responsive design rules.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I migrate my Tailwind CSS configuration to v4 without breaking utility syntax?▼

Tailwind CSS v4 migration requires adopting CSS-first @theme usage and updating renamed classes, opacity syntax, and variant stacking to v4 standards to prevent compatibility regressions.

What is the best way to set up dark mode and responsive breakpoints in Tailwind v4?▼

Dark mode and responsive breakpoints in Tailwind v4 use semantic design tokens, runtime variables, and CSS-first configuration, replacing deprecated JavaScript config patterns with native CSS theming control.

Does Tailwind v4 work with Vite, PostCSS, and CLI build workflows?▼

Tailwind v4 supports Vite, PostCSS, and CLI integration paths. Choosing the right build setup avoids deprecated configuration patterns and reduces CSS bundle size using built-in v4 tooling conventions.

Why does my Tailwind CSS bundle size increase after upgrading to v4?▼

Tailwind CSS bundle bloat after upgrading often stems from outdated utilities. Refactoring to v4 utility syntax, built-in container queries, and logical properties simplifies CSS generation and reduces bloat.

How do I refactor component CSS to use Tailwind v4 design-token patterns?▼

Refactoring component CSS to Tailwind v4 involves applying CSS-first configuration and semantic design tokens, standardizing theming and responsive behavior while leveraging built-in v4 features for cleaner markup.

Related Skills

Explore More Software Engineering Skills→
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
CodeReactOrNextCodeReactOrNext
3

frontend-design

Generate polished, customizable React components and HTML5/CSS3 templates for your next project with built-in TypeScript support and accessibility-first design.

Official
Advanced
blencorpblencorp
101

tailwindcss

Provide Tailwind CSS v4 utility-first guidance for responsive UI styling.

Official
Intermediate