---
id: JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration
version: "609f74bc"
license: MIT
install: manual
updated: 2026-06-18
---
# 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.
Publisher: JosiahSiegel · Stars: 49 · Updated: 2026-06-18
Install (manual): `git clone https://github.com/JosiahSiegel/claude-plugin-marketplace`
## SKILL.md
# Tailwind CSS Framework Integration
## React with Vite
### Setup
```bash
# 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
```javascript
// 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 "tailwindcss";
```
```tsx
// 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(
)
```
### Component Example
```tsx
// src/components/Button.tsx
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline'
size?: 'sm' | 'md' | 'lg'
children: React.ReactNode
onClick?: () => void
}
const variants = {
primary: 'bg-blue-600 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
}
const sizes = {
sm: 'px-3 py-1.5 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-6 py-3 text-lg'
}
export function Button({
variant = 'primary',
size = 'md',
children,
onClick
}: ButtonProps) {
return (
)
}
```
## Next.js
### Setup (App Router)
```bash
# Create Next.js project (Tailwind included by default)
npx create-next-app@latest my-app
cd my-app
```
If adding to existing project:
```bash
npm install -D tailwindcss @tailwindcss/postcss
```
### Configuration
```javascript
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}
```
```css
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-primary: oklch(0.6 0.2 250);
}
```
```tsx
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
### Server Components
Tailwind works seamlessly with React Server Components:
```tsx
// app/page.tsx (Server Component)
export default function Home() {
return (
Welcome
Server-rendered with Tailwind
)
}
```
### Dark Mode with next-themes
```bash
npm install next-themes
```
```tsx
// app/providers.tsx
'use client'
import { ThemeProvider } from 'next-themes'
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
```tsx
// app/layout.tsx
import { Providers } from './providers'
import './globals.css'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```css
/* globals.css - Add dark mode variant */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
```
## Vue 3
### Setup with Vite
```bash
npm create vue@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/vite
```
### Configuration
```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()]
})
```
```css
/* src/assets/main.css */
@import "tailwindcss";
```
```typescript
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
```
### Component Example
```vue
```
### Scoped Styles with @reference
```vue
Hello world!
```
### Alternative: CSS Variables
```vue
Hello world!
```
## Nuxt 3
### Setup
```bash
npx nuxi init my-app
cd my-app
npm install -D tailwindcss @tailwindcss/postcss
```
### Configuration
```javascript
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}
```
```css
/* assets/css/main.css */
@import "tailwindcss";
```
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/css/main.css']
})
```
## Svelte / SvelteKit
### Setup
```bash
npm create svelte@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/vite
```
### Configuration
```javascript
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit(), tailwindcss()]
})
```
```css
/* src/app.css */
@import "tailwindcss";
```
```svelte
```
### Component Example
```svelte
```
## Astro
### Setup
```bash
npm create astro@latest my-app
cd my-app
npx astro add tailwind
```
### Manual Setup
```bash
npm install -D tailwindcss @tailwindcss/vite
```
```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
})
```
```css
/* src/styles/global.css */
@import "tailwindcss";
```
```astro
---
import '../styles/global.css'
---
My Site
```
## Remix
### Setup
```bash
npx create-remix@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/vite
```
### Configuration
```javascript
// vite.config.ts
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [remix(), tailwindcss()]
})
```
```css
/* app/tailwind.css */
@import "tailwindcss";
```
```tsx
// app/root.tsx
import stylesheet from './tailwind.css?url'
import { Links } from '@remix-run/react'
export const links = () => [
{ rel: 'stylesheet', href: stylesheet }
]
export default function App() {
return (
)
}
```
## Best Practices for All Frameworks
### 1. Use the Prettier Plugin
```bash
npm install -D prettier prettier-plugin-tailwindcss
```
```json
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
```
### 2. Install VS Code Extension
```bash
code --install-extension bradlc.vscode-tailwindcss
```
### 3. Create Reusable Components
Don't repeat long class strings—extract components:
```tsx
// Instead of repeating this everywhere: