Tailwindcss Framework Integration
- 267 installs
- 50 repo stars
- Updated June 18, 2026
- josiahsiegel/claude-plugin-marketplace
tailwindcss-framework-integration is a Tailwind CSS v4 skill that documents per-framework setup for React, Next.js, Vue, Nuxt, SvelteKit, Astro, and Remix with PostCSS, Vite plugin, and dark-mode patterns for developers
About
tailwindcss-framework-integration is a JosiahSiegel claude-plugin-marketplace skill covering Tailwind CSS v4 integration across React with Vite, Next.js App Router, Vue 3, Nuxt 3, SvelteKit, Astro, and Remix. It documents @tailwindcss/vite and @tailwindcss/postcss setup, @import tailwindcss in CSS entry files, next-themes dark mode with @custom-variant, Vue scoped @reference directives, and clsx plus tailwind-merge class composition recipes. Developers reach for this skill when bootstrapping or migrating a framework project to Tailwind v4 and needing the correct config file per ecosystem. Proactive triggers include SSR-safe class merging and PostCSS versus CLI versus Vite plugin decisions. Component examples show variant-based Button patterns without repeating long utility strings.
- Next.js and Vite Tailwind setup
- PostCSS and autoprefixer configuration
- Component library coexistence patterns
- Dark mode and theme extension hooks
- Monorepo shared preset strategies
Tailwindcss Framework Integration by the numbers
- 267 all-time installs (skills.sh)
- +5 installs in the week ending Aug 2, 2026 (Skillselion tracking)
- Ranked #780 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-framework-integrationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 267 |
|---|---|
| repo stars | ★ 50 |
| Last updated | June 18, 2026 |
| Repository | josiahsiegel/claude-plugin-marketplace ↗ |
How do you set up Tailwind v4 in Next.js?
Wire Tailwind into Next.js, Vite, Remix, or component libraries with correct PostCSS, config files, and design-token conventions.
Who is it for?
Frontend developers adopting Tailwind CSS v4 who need correct wiring for Next.js App Router, Vite React, Vue, Nuxt, SvelteKit, Astro, or Remix projects.
Skip if: Projects already on Tailwind v3 with legacy tailwind.config.js-only setups and no plan to migrate to v4 CSS-first configuration.
When should I use this skill?
User asks to add Tailwind to React, Next.js, Vue, Nuxt, SvelteKit, Astro, or Remix, or needs PostCSS versus Vite plugin setup and tailwind-merge patterns.
What you get
Framework-specific vite.config.ts or postcss.config.mjs, CSS entry with @import tailwindcss, dark-mode variant setup, and component class-merge utilities
- vite.config.ts or postcss.config.mjs
- globals.css with @import tailwindcss
By the numbers
- Documents setup for 7 frontend frameworks including Next.js App Router and Remix
- Lists 10 proactive activation triggers in the skill description
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/viteConfiguration
// 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
}
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 (
<button
onClick={onClick}
className={`
inline-flex items-center justify-center
font-medium rounded-lg
transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed
${variants[variant]}
${sizes[size]}
`}
>
{children}
</button>
)
}Next.js
Setup (App Router)
# Create Next.js project (Tailwind included by default)
npx create-next-app@latest my-app
cd my-appIf adding to existing project:
npm install -D tailwindcss @tailwindcss/postcssConfiguration
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}/* app/globals.css */
@import "tailwindcss";
@theme {
--color-primary: oklch(0.6 0.2 250);
}// app/layout.tsx
import './globals.css'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="bg-white dark:bg-gray-900">{children}</body>
</html>
)
}Server Components
Tailwind works seamlessly with React Server Components:
// app/page.tsx (Server Component)
export default function Home() {
return (
<main className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white">
Welcome
</h1>
<p className="mt-4 text-gray-600 dark:text-gray-300">
Server-rendered with Tailwind
</p>
</main>
)
}Dark Mode with next-themes
npm install next-themes// app/providers.tsx
'use client'
import { ThemeProvider } from 'next-themes'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
)
}// app/layout.tsx
import { Providers } from './providers'
import './globals.css'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}/* globals.css - Add dark mode variant */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));Vue 3
Setup with Vite
npm create vue@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/viteConfiguration
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()]
})/* src/assets/main.css */
@import "tailwindcss";// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')Component Example
<!-- src/components/Button.vue -->
<script setup lang="ts">
defineProps<{
variant?: 'primary' | 'secondary'
}>()
</script>
<template>
<button
class="px-4 py-2 rounded-lg font-medium transition-colors"
:class="{
'bg-blue-600 text-white hover:bg-blue-700': variant === 'primary',
'bg-gray-200 text-gray-900 hover:bg-gray-300': variant === 'secondary'
}"
>
<slot />
</button>
</template>Scoped Styles with @reference
<template>
<h1>Hello world!</h1>
</template>
<style scoped>
/* Reference global Tailwind definitions */
@reference "../../assets/main.css";
h1 {
@apply text-2xl font-bold text-blue-600;
}
</style>Alternative: CSS Variables
<template>
<h1>Hello world!</h1>
</template>
<style scoped>
h1 {
/* Use CSS variables directly - better performance */
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-blue-600);
}
</style>Nuxt 3
Setup
npx nuxi init my-app
cd my-app
npm install -D tailwindcss @tailwindcss/postcssConfiguration
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}/* assets/css/main.css */
@import "tailwindcss";// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/css/main.css']
})Svelte / SvelteKit
Setup
npm create svelte@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/viteConfiguration
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit(), tailwindcss()]
})/* src/app.css */
@import "tailwindcss";<!-- src/routes/+layout.svelte -->
<script>
import '../app.css'
</script>
<slot />Component Example
<!-- src/lib/Button.svelte -->
<script lang="ts">
export let variant: 'primary' | 'secondary' = 'primary'
</script>
<button
class="px-4 py-2 rounded-lg font-medium transition-colors
{variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}
{variant === 'secondary' ? 'bg-gray-200 text-gray-900 hover:bg-gray-300' : ''}"
>
<slot />
</button>Astro
Setup
npm create astro@latest my-app
cd my-app
npx astro add tailwindManual Setup
npm install -D tailwindcss @tailwindcss/vite// astro.config.mjs
import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
})/* src/styles/global.css */
@import "tailwindcss";<!-- src/layouts/Layout.astro -->
---
import '../styles/global.css'
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Site</title>
</head>
<body class="bg-white dark:bg-gray-900">
<slot />
</body>
</html>Remix
Setup
npx create-remix@latest my-app
cd my-app
npm install -D tailwindcss @tailwindcss/viteConfiguration
// 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()]
})/* app/tailwind.css */
@import "tailwindcss";// 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 (
<html>
<head>
<Links />
</head>
<body className="bg-white dark:bg-gray-900">
<Outlet />
</body>
</html>
)
}Best Practices for All Frameworks
1. Use the Prettier Plugin
npm install -D prettier prettier-plugin-tailwindcss// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}2. Install VS Code Extension
code --install-extension bradlc.vscode-tailwindcss3. Create Reusable Components
Don't repeat long class strings—extract components:
// Instead of repeating this everywhere:
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
// Create a component:
<Button variant="primary">Click me</Button>4. Use clsx or tailwind-merge for Conditional Classes
npm install clsx tailwind-mergeimport { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// Usage
<div className={cn(
"base-class",
isActive && "active-class",
disabled && "opacity-50"
)} />5. Configure Path Aliases
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"]
}
}
}import { Button } from '@/components/Button'React + Tailwind Patterns
Component Architecture
Base Component Pattern
// components/ui/Button.tsx
import { forwardRef, type ButtonHTMLAttributes } from 'react'
import { cn } from '@/lib/utils'
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
size?: 'sm' | 'md' | 'lg' | 'icon'
isLoading?: boolean
}
const buttonVariants = {
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white',
outline: 'border-2 border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800',
ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800',
destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
}
const buttonSizes = {
sm: 'h-8 px-3 text-sm',
md: 'h-10 px-4 text-base',
lg: 'h-12 px-6 text-lg',
icon: 'h-10 w-10',
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant = 'primary', size = 'md', isLoading, disabled, children, ...props }, ref) => {
return (
<button
ref={ref}
disabled={disabled || isLoading}
className={cn(
'inline-flex items-center justify-center gap-2 font-medium rounded-lg',
'transition-colors duration-200',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
'disabled:opacity-50 disabled:pointer-events-none',
buttonVariants[variant],
buttonSizes[size],
className
)}
{...props}
>
{isLoading && <Spinner className="h-4 w-4" />}
{children}
</button>
)
}
)
Button.displayName = 'Button'Utility Function
// lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Compound Components
// components/ui/Card.tsx
import { cn } from '@/lib/utils'
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
export function Card({ className, ...props }: CardProps) {
return (
<div
className={cn(
'rounded-xl border border-gray-200 bg-white shadow-sm',
'dark:border-gray-800 dark:bg-gray-900',
className
)}
{...props}
/>
)
}
export function CardHeader({ className, ...props }: CardProps) {
return <div className={cn('p-6 pb-0', className)} {...props} />
}
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
return (
<h3
className={cn('text-xl font-semibold text-gray-900 dark:text-white', className)}
{...props}
/>
)
}
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
return (
<p className={cn('mt-1.5 text-sm text-gray-500 dark:text-gray-400', className)} {...props} />
)
}
export function CardContent({ className, ...props }: CardProps) {
return <div className={cn('p-6', className)} {...props} />
}
export function CardFooter({ className, ...props }: CardProps) {
return (
<div
className={cn('flex items-center p-6 pt-0', className)}
{...props}
/>
)
}Usage:
<Card>
<CardHeader>
<CardTitle>Account Settings</CardTitle>
<CardDescription>Manage your account preferences</CardDescription>
</CardHeader>
<CardContent>
<form>...</form>
</CardContent>
<CardFooter>
<Button>Save Changes</Button>
</CardFooter>
</Card>Polymorphic Components
// components/ui/Box.tsx
import { forwardRef, type ElementType, type ComponentPropsWithoutRef } from 'react'
import { cn } from '@/lib/utils'
type BoxProps<T extends ElementType = 'div'> = {
as?: T
className?: string
} & ComponentPropsWithoutRef<T>
export const Box = forwardRef(
<T extends ElementType = 'div'>(
{ as, className, ...props }: BoxProps<T>,
ref: React.Ref<Element>
) => {
const Component = as || 'div'
return <Component ref={ref} className={cn(className)} {...props} />
}
) as <T extends ElementType = 'div'>(
props: BoxProps<T> & { ref?: React.Ref<Element> }
) => React.ReactElement | nullUsage:
<Box as="section" className="p-4 bg-gray-50">Section content</Box>
<Box as="article" className="prose">Article content</Box>
<Box as="aside" className="w-64">Sidebar</Box>Variant Props with cva
npm install class-variance-authority// components/ui/Badge.tsx
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const badgeVariants = cva(
'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
{
variants: {
variant: {
default: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100',
primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-100',
success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100',
warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100',
danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
},
size: {
sm: 'text-xs px-2 py-0.5',
md: 'text-sm px-2.5 py-0.5',
lg: 'text-base px-3 py-1',
},
},
defaultVariants: {
variant: 'default',
size: 'md',
},
}
)
interface BadgeProps
extends React.HTMLAttributes<HTMLSpanElement>,
VariantProps<typeof badgeVariants> {}
export function Badge({ className, variant, size, ...props }: BadgeProps) {
return <span className={cn(badgeVariants({ variant, size }), className)} {...props} />
}Animation Patterns
// components/ui/FadeIn.tsx
import { cn } from '@/lib/utils'
interface FadeInProps extends React.HTMLAttributes<HTMLDivElement> {
delay?: number
duration?: number
}
export function FadeIn({
className,
delay = 0,
duration = 500,
style,
...props
}: FadeInProps) {
return (
<div
className={cn(
'animate-in fade-in slide-in-from-bottom-4',
className
)}
style={{
animationDelay: `${delay}ms`,
animationDuration: `${duration}ms`,
...style,
}}
{...props}
/>
)
}Form Components
// components/ui/Input.tsx
import { forwardRef, type InputHTMLAttributes } from 'react'
import { cn } from '@/lib/utils'
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
error?: boolean
}
export const Input = forwardRef<HTMLInputElement, InputProps>(
({ className, error, type = 'text', ...props }, ref) => {
return (
<input
type={type}
ref={ref}
className={cn(
'w-full rounded-lg border px-3 py-2',
'bg-white dark:bg-gray-900',
'text-gray-900 dark:text-white',
'placeholder:text-gray-400',
'transition-colors duration-200',
'focus:outline-none focus:ring-2 focus:ring-offset-2',
error
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 dark:border-gray-700 focus:ring-primary-500',
'disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...props}
/>
)
}
)
Input.displayName = 'Input'Responsive Component Patterns
// components/layout/Container.tsx
import { cn } from '@/lib/utils'
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
}
const containerSizes = {
sm: 'max-w-screen-sm',
md: 'max-w-screen-md',
lg: 'max-w-screen-lg',
xl: 'max-w-screen-xl',
full: 'max-w-full',
}
export function Container({ className, size = 'lg', ...props }: ContainerProps) {
return (
<div
className={cn(
'mx-auto w-full px-4 sm:px-6 lg:px-8',
containerSizes[size],
className
)}
{...props}
/>
)
}Dark Mode Hook
// hooks/useDarkMode.ts
import { useEffect, useState } from 'react'
export function useDarkMode() {
const [isDark, setIsDark] = useState(false)
useEffect(() => {
const root = document.documentElement
const stored = localStorage.getItem('theme')
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (stored === 'dark' || (!stored && prefersDark)) {
root.classList.add('dark')
setIsDark(true)
}
}, [])
const toggle = () => {
const root = document.documentElement
const newValue = !isDark
root.classList.toggle('dark', newValue)
localStorage.setItem('theme', newValue ? 'dark' : 'light')
setIsDark(newValue)
}
return { isDark, toggle }
}Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kHow it compares
Pick tailwindcss-framework-integration for v4 per-framework wiring recipes; use tailwindcss-fundamentals-v4 in the same plugin for core @theme and @utility concepts without framework-specific steps.
FAQ
Which frameworks does tailwindcss-framework-integration cover?
tailwindcss-framework-integration documents Tailwind CSS v4 setup for React with Vite, Next.js App Router, Vue 3, Nuxt 3, SvelteKit, Astro, and Remix including PostCSS and Vite plugin options.
How does tailwindcss-framework-integration handle dark mode in Next.js?
tailwindcss-framework-integration uses next-themes ThemeProvider with attribute class and adds @custom-variant dark (&:where(.dark, .dark *)) in globals.css for selector-based dark mode in App Router projects.