tailwind-ssr

Included with Lifetime

$97 forever

TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues.

Web Dev

What this skill does


# TailwindCSS v4 & SSR Expert

Expert assistant for TailwindCSS v4 configuration, SSR/SSG styling strategies, critical CSS optimization, and frontend performance.

## Thinking Process

When activated, follow this structured thinking approach to solve TailwindCSS and SSR styling problems:

### Step 1: Version and Context Identification

**Goal:** Understand the exact TailwindCSS and framework context.

**Key Questions to Ask:**
- What TailwindCSS version? (v3 vs v4 have major differences)
- What frontend framework? (SvelteKit, Next.js, Nuxt, etc.)
- What rendering mode? (SSR, SSG, SPA, hybrid)
- What build tool? (Vite, Webpack, Turbopack)

**Actions:**
1. Check `package.json` for tailwindcss version
2. Review build configuration (vite.config, next.config)
3. Identify CSS entry point and import style

**Version Decision Matrix:**

| If | Then Use |
|----|----------|
| New project | TailwindCSS v4 (CSS-first) |
| Existing v3 project | Consider migration or stay on v3 |
| Legacy browser support needed | TailwindCSS v3 |

**Decision Point:** Document:
- "TailwindCSS version: [X]"
- "Framework: [Y] with [Z] rendering"

### Step 2: Problem Classification

**Goal:** Understand what type of styling challenge this is.

**Key Questions to Ask:**
- Is this a configuration problem? (setup, plugins, theme)
- Is this an SSR problem? (FOUC, hydration, critical CSS)
- Is this a performance problem? (bundle size, render blocking)
- Is this a design system problem? (tokens, variants, customization)

**Decision Point:** Classify to select appropriate solutions:
- Configuration → Check tailwind.config or CSS imports
- SSR → Analyze render timing and CSS delivery
- Performance → Review bundle and critical CSS strategy
- Design System → Design theme and variant structure

### Step 3: Configuration Analysis (v3 vs v4)

**Goal:** Ensure correct configuration for the version.

**TailwindCSS v4 (CSS-first):**
```css
/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.7 0.15 200);
  --font-display: "Inter", sans-serif;
}
```

**TailwindCSS v3 (JS-based):**
```javascript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
}
```

**Migration Considerations:**
- v4 auto-detects content (no config needed)
- v4 uses CSS variables for theming
- v4 has new color functions (oklch)
- v4 requires modern browsers

### Step 4: SSR Styling Strategy

**Goal:** Ensure styles load correctly in SSR context.

**Thinking Framework:**
- "What CSS is needed for first paint?"
- "When is the stylesheet loaded?"
- "What causes Flash of Unstyled Content (FOUC)?"

**SSR Styling Timeline:**
```
Server Render → HTML with inline/critical CSS → Browser parses HTML
    → Download full CSS → Hydration → Interactive
```

**SSR Checklist:**
- [ ] CSS imported in layout/root component
- [ ] Critical CSS inlined or preloaded
- [ ] No style-dependent JavaScript before CSS loads
- [ ] Consistent class generation server/client

**Framework-Specific Patterns:**

| Framework | CSS Import Location |
|-----------|---------------------|
| SvelteKit | +layout.svelte or app.css |
| Next.js | app/layout.tsx or globals.css |
| Nuxt | nuxt.config.ts css array |

### Step 5: FOUC Prevention

**Goal:** Eliminate Flash of Unstyled Content.

**Thinking Framework:**
- "Is CSS render-blocking or async?"
- "What is the first meaningful paint showing?"
- "Is there content shift during hydration?"

**FOUC Causes and Solutions:**

| Cause | Solution |
|-------|----------|
| CSS loads async | Make critical CSS render-blocking |
| Dynamic classes | Ensure SSR includes all needed classes |
| Font loading | Use font-display: swap with preload |
| Theme switching | Inline theme detection script |

**Anti-FOUC Pattern:**
```html
<html class="no-js">
<head>
  <!-- Inline critical CSS -->
  <style>/* critical styles */</style>

  <!-- Theme detection before render -->
  <script>
    const theme = localStorage.getItem('theme') || 'light';
    document.documentElement.classList.add(theme);
    document.documentElement.classList.remove('no-js');
  </script>

  <!-- Full CSS with preload -->
  <link rel="preload" href="/styles.css" as="style">
  <link rel="stylesheet" href="/styles.css">
</head>
```

### Step 6: Performance Optimization

**Goal:** Minimize CSS impact on performance.

**Thinking Framework:**
- "How large is the CSS bundle?"
- "What CSS is unused?"
- "What is render-blocking?"

**Performance Checklist:**
- [ ] PurgeCSS/content detection configured correctly
- [ ] No unused Tailwind plugins loaded
- [ ] Critical CSS extracted and inlined
- [ ] Non-critical CSS deferred
- [ ] Fonts optimized (subset, preload, swap)

**Bundle Analysis:** build with `--minify` and check the emitted CSS size; in v4 the output is driven by detected content, so unused utilities never ship.

**Optimization Strategies:**

| Strategy | When to Use |
|----------|-------------|
| Disable unused core plugins | Reduce base size |
| Use specific content globs | Faster builds, smaller output |
| Extract critical CSS | Improve FCP |
| Lazy load below-fold styles | Reduce initial CSS |

### Step 7: Theme and Design Token Strategy

**Goal:** Design a maintainable theming system.

**Thinking Framework:**
- "What needs to be customizable?"
- "How do we handle dark mode?"
- "What are the design system tokens?"

**Theme Architecture (v4):**
```css
@theme {
  /* Color tokens */
  --color-primary: oklch(0.6 0.2 250);
  --color-secondary: oklch(0.7 0.15 180);

  /* Semantic tokens */
  --color-background: var(--color-gray-50);
  --color-foreground: var(--color-gray-900);

  /* Spacing scale */
  --spacing-page: 2rem;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-foreground: var(--color-gray-50);
  }
}
```

**Dark Mode Strategies:**

| Strategy | Implementation |
|----------|----------------|
| System preference | @media (prefers-color-scheme) |
| Class-based | Toggle .dark on html element |
| Hybrid | System default + user override |

### Step 8: Troubleshooting Framework

**Goal:** Systematically debug styling issues.

**Debugging Checklist:**

| Symptom | Check |
|---------|-------|
| Classes not applying | Content detection paths |
| FOUC on navigation | CSS import in layout |
| Hydration mismatch | Dynamic classes in SSR |
| Build too slow | Glob pattern specificity |
| Bundle too large | Unused plugins, content paths |

**Debug Commands:** `DEBUG=tailwindcss:content` to trace content detection; pass `--verbose` to the CLI to inspect the build; confirm dynamic classes literally appear in source (v4 detects whole class strings, not interpolated fragments).

## 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`
- Blog (release notes): `https://tailwindcss.com/blog`
- Upgrade Guide: `https://tailwindcss.com/docs/upgrade-guide`

## Install & Tooling

Always install `tailwindcss@latest` alongside the matching first-party loader for
your build tool — keep the two versions in sync.

```bash
# Vite (recommended for SvelteKit / Vite apps)
npm i -D tailwindcss@latest @tailwindcss/vite@latest

# PostCSS
npm i -D tailwindcss@latest @tailwindcss/postcss@latest

# CLI
npm i -D tailwindcss@latest @tailwindcss/cli@latest

# Webpack / Next.js (Turbopack) — first-party loader, 2x+ faster than the PostCSS path
npm i -D tailwindcss@latest @tailwindcss/webpack@latest
```

| Build tool | Loader | Notes |
|------------|--------|-------|
| Vite | `@tailwindcss/vite` | Canonical path for SvelteKit; add to `vite.config` plugins |
| Webpack / Next.js | `@tailwindcss/webpack` | First-party loader (v4.2+); faster than `@tailwindcss/postcss` |
| PostCSS | `@tailwindcs

Files: 1

Size: 13.8 KB

Complexity: 17/100

Category: Web Dev

Source: https://github.com/tomlord1122/tomtom-skill/tree/main/skills/tailwind-ssr

Related in Web Dev

generating-lwc-components

Included

Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.

Web Devscripts

tanstack-query

Included

Manage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.

Web Devscripts

document-processor-api

Included

Process documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.

Web Devscripts

nutrient-document-processing

Included

Web Devscripts

tanstack-query

Included

Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.

Web Devscripts

accelint-nextjs-best-practices

Included

Next.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.

Web Devscripts