tailwindcss-framework-integration
Get framework-specific Tailwind CSS setup instructions covering React with Vite, Next.js App Router, Vue 3, Nuxt, SvelteKit, and Astro. Includes configuration files, dark mode setup, and reusable component patterns for each framework.
Tailwind CSS Framework Integration provides setup guides and configuration examples for React, Vue, Next.js, Svelte, Angular, Astro, and other frameworks.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-18
Tailwind CSS Framework Integration provides setup guides and configuration examples for React, Vue, Next.js, Svelte, Angular, Astro, and other frameworks. Get framework-specific Tailwind CSS setup instructions covering React with Vite, Next.js App Router, Vue 3, Nuxt, SvelteKit, and Astro. Includes configuration files, dark mode setup, and reusable component patterns for each framework.
Use it when
- tailwindcss-framework-integration covers Next.js App Router integration with step-by-step configuration.
- tailwindcss-framework-integration recommends using tailwind-merge for class composition and clsx for conditional classes.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up Tailwind in my framework?
tailwindcss-framework-integration provides framework-specific setup instructions for React with Vite, Next.js App Router, Vue 3, Nuxt, SvelteKit, and Astro. Each guide includes configuration files, PostCSS setup, and content path configuration tailored to your framework's build system.
How to use Tailwind with Next.js?
tailwindcss-framework-integration covers Next.js App Router integration with step-by-step configuration. It includes tailwind.config.js setup, content paths for app and pages directories, and integration with Next.js's built-in CSS support for optimal performance.
What's the best way to compose Tailwind classes safely?
tailwindcss-framework-integration recommends using tailwind-merge for class composition and clsx for conditional classes. These tools prevent conflicting utility classes and ensure proper specificity handling across reusable components in any framework.
How do I implement dark mode with Tailwind?
tailwindcss-framework-integration includes dark mode setup for each framework, with next-themes integration for Next.js. Configuration covers class-based and system-preference modes, theme switching patterns, and framework-specific storage solutions.
What are Tailwind component library best practices?
tailwindcss-framework-integration outlines reusable component patterns for each framework, including class merging strategies, prop-based styling, and composition techniques. It covers component library setup, documentation, and distribution across React, Vue, Svelte, and other frameworks.
Which Tailwind CSS setup works for Astro and Remix?
tailwindcss-framework-integration provides Astro and Remix-specific guides covering Vite plugin configuration, PostCSS setup, and content paths. Both frameworks integrate Tailwind through standard build pipelines with minimal configuration overhead.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Tailwind CSS Framework Integration
React with Vite
Setup
# Create React + Vite project
npm create vite@latest my-app -- --template react-ts
cd my-app
# Install Tailwind CSS
npm install -D tailwindcss @tailwindcss/vite
Configuration
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()]
})
```css / src/index.css / @import
(truncated - see the full file via the links below)
File tree — 2 files
plugins/tailwindcss-master/skills/tailwindcss-framework-integration/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-framework-integration/references/react-patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up Tailwind CSS in a specific web framework”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
Master Tailwind CSS with 29 rules spanning responsive layouts, dark mode setup, reusable component patterns, and configuration across v3.4+ and v4. Learn mobile-first design, conditional styling with utilities, and how to migrate projects from v3 to v4 using the new CSS-first approach.
Master Tailwind CSS, the utility-first framework that lets you build custom interfaces by composing single-purpose classes directly in your markup. This skill covers responsive design, dark mode, theme customization, component patterns, and production-ready optimization techniques.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
Apply Tailwind CSS to Capacitor mobile applications with guidance on responsive mobile design, notch and safe area handling, and touch-optimized components. Covers dark mode integration, 44px minimum touch targets, and mobile-specific patterns like bottom sheets and swipe actions.
More skills tailwindcss-performance (MIT) · Frontend Ui Skill (unlicensed) · Heroui (MIT) · hebrew-tailwind-preset (MIT) · inspira-ui (MIT) · Nextjs React Implementation (unlicensed)