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
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-framework-integration ~/.claude/skills/tailwindcss-framework-integrationnpx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integrationFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
plugins/tailwindcss-master/skills/tailwindcss-framework-integration/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-framework-integration/references/react-patterns.md