Tailwindcss Framework Integration

This is a comprehensive reference for setting up Tailwind CSS across React (Vite and CRA), Next.js (both App and Pages Router), Vue 3, Nuxt, SvelteKit, Astro, and Angular. It covers the new @tailwindcss/vite plugin setup, PostCSS configuration, and framework-specific quirks like Vue's @reference directive for scoped styles and Next.js dark mode with next-themes. The component examples show practical patterns for variant-based styling without class merging libraries, though the description promises tailwind-merge recipes. Useful when you're switching frameworks or need to remember which import goes where, since each ecosystem has slightly different wiring for the same end result.

skills.sh installs: 296
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-framework-integration --agent claude-code

Installs into .claude/skills of the current project.

Files

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()]
})

/* src/index.css */
@import "tailwindcss";

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Component Example

// src/components/Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
  onClick?: () => void
}

SKILL.md on GitHub