skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-tailwind-seo

Configure Tailwind CSS 4.3, SEO metadata, fonts, and structured data in Next.js 16 App Router projects.

Updated Mar 29, 2026
Search Tags:#next.js#tailwind css#metadata#sitemap#seo#app router#json-ld
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill nextjs-tailwind-seo-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-tailwind-seo
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/nextjs-tailwind-seo
Command: npx skills add https://github.com/r-senchuk/agentskills --skill nextjs-tailwind-seo-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/postcss, postcss, next-sitemap, and includes references (resource) components.

What problem does it solve? Setting up Tailwind CSS v4 and complete SEO infrastructure in a Next.js 16 App Router project involves many scattered configuration steps — CSS-first theme tokens, per-page metadata, JSON-LD schemas, sitemaps, and canonical URLs — that are easy to get wrong or miss entirely. ## Core Features & Use Cases - Tailwind CSS 4.3 Setup: CSS-first configuration with @theme design tokens, @tailwindcss/postcss, and Google Fonts via next/font mapped to CSS variables. - SEO Metadata & Structured Data: generateMetadata() templates with canonical URLs, hreflang alternates, Open Graph/Twitter cards, and reusable JSON-LD components for LocalBusiness and WebSite schemas. - Sitemap & Robots: Built-in app/sitemap.ts and app/robots.ts with locale-aware URLs, plus legacy next-sitemap guidance for existing projects. - Use Case: You are building a localized marketing site on Next.js 16 and need Tailwind v4 tokens, per-locale metadata, JSON-LD for a local business, and a working sitemap.xml — this Skill walks through each step with copy-ready templates and a completion checklist. ## Quick Start Set up Tailwind CSS 4.3 with custom brand colors and add generateMetadata with canonical URLs and JSON-LD to my Next.js 16 App Router project.

Frequently Asked Questions about nextjs-tailwind-seo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Tailwind CSS v4 in a Next.js App Router project?▼

Install tailwindcss, @tailwindcss/postcss, and postcss, then create a postcss.config.mjs using the @tailwindcss/postcss plugin. Add @import "tailwindcss" to globals.css and define custom tokens inside an @theme block — no tailwind.config.js is required.

How do I add per-page SEO metadata in Next.js 16?▼

Export a generateMetadata() function from each page returning title, description, alternates.canonical, openGraph, and twitter blocks. Set metadataBase in the root layout so relative OG image and canonical URLs resolve to absolute URLs.

Should I use app/sitemap.ts or the next-sitemap package?▼

Prefer the built-in app/sitemap.ts and app/robots.ts conventions for new Next.js 16 projects, including locale-aware alternates. Use next-sitemap only for legacy projects, running it via a postbuild script with outDir set to ./out for static exports.

Why are my custom Tailwind v4 colors not working as classes?▼

In Tailwind v4, custom colors must follow the --color-* naming convention inside the @theme block in globals.css. For example, --color-brand: #1B3A5C becomes available as bg-brand and text-brand automatically.

Why is my OG image not showing on social platforms?▼

Open Graph images must use absolute URLs including the full https:// domain, with a recommended size of 1200x630 pixels. Validate the tags with the Facebook Sharing Debugger and Twitter Card Validator after deployment.

When should I not use this Tailwind and SEO setup approach?▼

This approach does not cover backend API development, non-Tailwind styling solutions like CSS Modules or styled-components, or design and branding decisions. It targets Next.js 16.2 App Router projects specifically, not Pages Router or other frameworks.

Related Skills

Explore More Software Engineering Skills→
flavien-iaflavien-ia
34

add-i18n

Configures internationalization for Next.js App Router projects using the next-intl library with SEO-friendly locale routing.

Community
Advanced
aashahinaashahin

schema-markup

Implements JSON-LD structured data markup for search engine rich results.

Community
Intermediate
OpenClaudiaOpenClaudia
674

i18n

Implements next-intl internationalization with locale routing, hreflang sitemaps, and bulk translation for Next.js projects.

Official
Advanced
trystan2ktrystan2k

css-architecture

Organize CSS with CSS Modules for component-scoped styles.

Community
Intermediate