tailwind-ssr
TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues.
Best use case
tailwind-ssr is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues.
Teams using tailwind-ssr should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/tailwind-ssr/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How tailwind-ssr Compares
| Feature / Agent | tailwind-ssr | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# TailwindCSS v4 & SSR Expert
Expert assistant for TailwindCSS v4 configuration, SSR/SSG styling strategies, critical CSS optimization, and frontend performance.
## How It Works
1. Identifies TailwindCSS version and framework context
2. Queries Context7 documentation (`/websites/tailwindcss`)
3. Provides configuration and optimization solutions
4. 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
```css
/* v4 uses CSS @import instead of @tailwind directives */
@import "tailwindcss";
/* Design tokens as CSS variables */
@theme {
--color-primary: oklch(0.7 0.15 200);
--font-display: "Inter", sans-serif;
--breakpoint-3xl: 1920px;
}
```
### Automatic Content Detection
```css
/* v4 auto-detects content, no config needed */
/* Manual override if needed: */
@source "../components/**/*.tsx";
```
### New Features
```css
/* Container queries */
@container (min-width: 400px) {
.card { /* styles */ }
}
/* 3D transforms */
.element {
@apply rotate-x-45 perspective-500;
}
/* Modern color functions */
.button {
background: oklch(0.7 0.15 200);
}
```
## SSR Performance Checklist
### Critical CSS
- [ ] Inline above-the-fold CSS
- [ ] Defer non-critical stylesheets
- [ ] Use `<link rel="preload">` for fonts
### Hydration
- [ ] Avoid layout shifts during hydration
- [ ] Match server and client class generation
- [ ] Test with JavaScript disabled
### FOUC Prevention
```html
<!-- Add loading state -->
<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
```svelte
<!-- +layout.svelte -->
<script>
import '../app.css';
</script>
```
```css
/* app.css */
@import "tailwindcss";
```
### Next.js
```tsx
// app/layout.tsx
import './globals.css';
```
```css
/* globals.css */
@import "tailwindcss";
```
## Performance Optimization
### PurgeCSS (Production)
```css
/* v4 handles this automatically */
/* Ensure all dynamic classes are detectable */
```
### Custom Variants
```css
@variant hocus (&:hover, &:focus);
@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &);
```
### Reduce Bundle Size
```css
/* Disable unused core plugins */
@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 toolRelated Skills
tailwind
How to work effectively with Tailwind CSS, always use when styling frontend features
tailwind-setup
Configure Tailwind CSS and shadcn/ui for React frontends with Django backends, including dark mode support and theme tokens. This skill should be used when setting up a new React project or adding Tailwind to an existing one.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
tailwind-ecommerce
Use when building ecommerce interfaces, product pages, shopping carts, checkout flows, order management, or store navigation with Tailwind CSS. Covers product cards, product lists, product detail pages, category filters, shopping cart, checkout forms, order summaries, order history, pricing displays, promo sections, reviews, ratings, store navigation, category previews, inventory badges, wishlist buttons, compare features.
tailwind-css
Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications.
tailwind-configuration
Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.
frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
tailwind-design-system
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI...
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
ui ux
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
ui-ux-design
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.