skills.rest
zenbuapps
zenbuappsOFFICIAL
Explore all skills by this author →
GitHub

tailwindcss-v3

Explain Tailwind CSS v3 configuration and v3-to-v4 migration guidance.

1|Updated Mar 6, 2026
Search Tags:#css#migration#web-development#tailwind#tailwindcss#v3
One-click install
npx skills add https://github.com/zenbuapps/zenbu-powers --skill tailwindcss-v3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-v3
Source: https://github.com/zenbuapps/zenbu-powers/tree/main/skills/tailwindcss-v3
Command: npx skills add https://github.com/zenbuapps/zenbu-powers --skill tailwindcss-v3

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind CSS v3 projects often struggle with correct configuration, usage patterns, and migration pitfalls; this Skill provides an authoritative reference and practical guidance for working with v3 (v3.4.x) and navigating to v4.

Core Features & Use Cases

  • v3 reference and configuration: explains the shape of tailwind.config.js, how to set up content globs, and the difference between theme and theme.extend.
  • Migration guidance: highlights key v3→v4 differences, compatibility notes, and practical steps to migrate existing projects.
  • Practical snippets and conventions: showcases v3-specific patterns like bg-[--color-surface] and other arbitrary-value techniques used in v3 projects.

Quick Start

Identify your project’s v3 config and apply migration guidance to align with v4.

Frequently Asked Questions about tailwindcss-v3

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

FAQPage Schema
How do I configure content globs in Tailwind CSS v3?▼

To configure content globs in Tailwind CSS v3, define the file paths in the `content` array within `tailwind.config.js` to ensure the compiler scans and purges unused CSS classes correctly.

What is the difference between theme and theme.extend in tailwind.config.js?▼

In `tailwind.config.js`, `theme` overrides default Tailwind CSS v3 values entirely, while `theme.extend` adds to or modifies existing defaults without removing the original configuration options.

How do I migrate an existing Tailwind CSS v3 project to v4?▼

Migrating a Tailwind CSS v3 project to v4 requires reviewing key compatibility differences, updating configuration patterns, and applying practical migration steps to align the v3 setup with v4 conventions.

Can I use arbitrary value techniques like bg-[--color-surface] in Tailwind v3?▼

Yes, Tailwind CSS v3 supports arbitrary value techniques such as `bg-[--color-surface]`, allowing you to apply custom CSS variable values directly within your utility classes for flexible styling.

Does Tailwind CSS v3.4.x support legacy setup configurations?▼

Tailwind CSS v3.4.x fully supports legacy setup configurations, providing authoritative reference for maintaining the v3 config shape, content scanning patterns, and specific v3 conventions.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-config-v3

Configure Tailwind CSS v3.4 projects via tailwind.config.js setup.

Official
Intermediate
moughamirmoughamir

tailwind-design-system

Build Tailwind CSS v4 design systems with CSS-first @theme tokens.

Community
Advanced
Pancake-QPancake-Q
1

unocss

Generate CSS utility classes on-demand from source code with UnoCSS.

Community
Advanced
Cissou34730Cissou34730

tailwind-architect

Enforce Tailwind CSS v4.1 token-driven architecture and v3-to-v4 migration guidance.

Community
Advanced