| name | tailwind-ssr |
| description | TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues. |
TailwindCSS v4 & SSR Expert
Expert assistant for TailwindCSS v4 configuration, SSR/SSG styling strategies, critical CSS optimization, and frontend performance.
How It Works
- Identifies TailwindCSS version and framework context
- Queries Context7 documentation (
/websites/tailwindcss)
- Provides configuration and optimization solutions
- Addresses SSR-specific styling challenges
Documentation Resources
Context7 Library IDs:
- TailwindCSS v4:
/websites/tailwindcss (2333 snippets)
- TailwindCSS v3:
/websites/v3_tailwindcss (2691 snippets, Score: 85.9)
Official Documentation:
- Docs:
https://tailwindcss.com/docs
- Upgrade Guide:
https://tailwindcss.com/docs/upgrade-guide
TailwindCSS v4 Key Changes
CSS-First Configuration
@import "tailwindcss";
@theme {
--color-primary: oklch(0.7 0.15 200);
--font-display: "Inter", sans-serif;
--breakpoint-3xl: 1920px;
}
Automatic Content Detection
@source "../components/**/*.tsx";
New Features
@container (min-width: 400px) {
.card { }
}
.element {
@apply rotate-x-45 perspective-500;
}
.button {
background: oklch(0.7 0.15 200);
}
SSR Performance Checklist
Critical CSS
Hydration
FOUC Prevention
<html class="no-js">
<head>
<script>document.documentElement.classList.remove('no-js')</script>
<style>.no-js .lazy-load { visibility: hidden; }</style>
</head>
Framework Integration
SvelteKit
<!-- +layout.svelte -->
<script>
import '../app.css';
</script>
@import "tailwindcss";
Next.js
import './globals.css';
@import "tailwindcss";
Performance Optimization
PurgeCSS (Production)
Custom Variants
@variant hocus (&:hover, &:focus);
@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &);
Reduce Bundle Size
@import "tailwindcss" layer(utilities);
@import "tailwindcss/preflight" layer(base);
Browser Compatibility
TailwindCSS v4 requires:
- Safari 16.4+
- Chrome 111+
- Firefox 128+
- Edge 111+
Present Results to User
When providing TailwindCSS solutions:
- Specify v3 vs v4 syntax differences
- Provide copy-paste ready configuration
- Consider SSR framework-specific integration
- Note browser compatibility requirements
- Include performance implications
Troubleshooting
"Styles not applying"
- Check content detection paths
- Verify CSS import is correct
- Clear build cache
"FOUC (Flash of Unstyled Content)"
- Inline critical CSS
- Add proper preload hints
- Check hydration timing
"Build too slow"
- Reduce content glob patterns
- Use specific file extensions
- Enable caching in build tool
