skills.rest
theslashdojo
theslashdojoOFFICIAL
Explore all skills by this author →
GitHub

config

Install, configure, and migrate Tailwind CSS across v3 and v4 projects.

Updated Apr 10, 2026
Search Tags:#css#migration#configuration#vite#tailwind#postcss
One-click install
npx skills add https://github.com/theslashdojo/dojo --skill config-theslashdojo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: config
Source: https://github.com/theslashdojo/dojo/tree/main/nodes/tailwind/config
Command: npx skills add https://github.com/theslashdojo/dojo --skill config-theslashdojo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, @tailwindcss/postcss, postcss, autoprefixer, and includes scripts (resource) components.

What problem does it solve?

Tailwind setup across projects can be tricky due to dual configuration eras (v3 JavaScript config and v4 CSS-first config). This Skill provides a guided approach to installing, configuring, and migrating Tailwind to ensure consistent design tokens and build tooling across modern stacks.

Core Features & Use Cases

  • Install Tailwind CSS via Vite plugin (Tailwind v4) or PostCSS (v4 or v3) and wire up a CSS entry with @import "tailwindcss".
  • Configure theming and design tokens using the @theme directive in v4 or tailwind.config.js in v3, including colors, fonts, breakpoints, spacing, and plugins.
  • Migrate between v3 and v4, auto-detect content sources, and debug missing classes.
  • Use across Next.js, Vite, static sites, and other build tools.

Quick Start

Run the Tailwind setup workflow to bootstrap Tailwind in your project (choose v4 with Vite or PostCSS tooling depending on your stack).

Frequently Asked Questions about config

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

FAQPage Schema
How do I install and configure Tailwind CSS with Vite?▼

To configure Tailwind CSS with Vite, you install the Tailwind CSS Vite plugin and wire up a CSS entry file using the @import "tailwindcss" directive. This scaffolds a CSS-first setup for Tailwind v4 projects.

What is the difference between Tailwind v3 and v4 configuration?▼

Tailwind v3 uses a JavaScript configuration file (tailwind.config.js), while Tailwind v4 introduces a CSS-first configuration approach using the @theme directive for defining design tokens like colors, fonts, and spacing.

How do I migrate Tailwind CSS from v3 to v4?▼

Migrating Tailwind CSS from v3 to v4 involves transitioning from JavaScript configuration to CSS-first setup, auto-detecting content sources, and applying the @theme directive to ensure consistent design tokens across modern stacks.

Does Tailwind CSS work with PostCSS and Next.js?▼

Yes, Tailwind CSS can be installed and configured using PostCSS tooling for v4 or v3 setups. It supports integration across Next.js, static sites, and monorepos, handling theming and plugin usage consistently.

Why are my Tailwind CSS classes missing in the build output?▼

Missing Tailwind CSS classes often occur due to incorrect content detection. You can debug this by verifying auto-detected sources and ensuring your build tooling correctly scaffolds the CSS entry file across your project structure.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

Integrate Tailwind CSS into non-Vite build systems via PostCSS or standalone CLI.

Official
Intermediate
IgniteUIIgniteUI
601

igniteui-angular-build

Compile and bundle the Ignite UI for Angular library with npm build commands.

Official
Intermediate
Andrej1601Andrej1601

tailwindcss-framework-integration

Configure Tailwind CSS across React, Vue, and Next.js projects.

Community
Intermediate
koralliskorallis
90

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate