# Tailwind Responsive & Darkmode Styler > Transforms raw JSX or HTML structures into fully responsive, accessible, dark-mode ready web interfaces using Tailwind CSS utility classes. - Skill: `rmazrim/tailwind-responsive-darkmode-styler` (Agent Skill) - Install (CLI): `npx skillmds@latest add rmazrim/tailwind-responsive-darkmode-styler` - Raw SKILL.md: https://api.skillmd.com/api/skills/rmazrim/tailwind-responsive-darkmode-styler/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: RMAzrim (https://skillmd.com/u/rmazrim) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/rmazrim/tailwind-responsive-darkmode-styler --- # Tailwind Responsive & Darkmode Styler ## 1. System Architecture & Prerequisites - Runtime: Node.js >= 20.11.0, npm >= 10 (or pnpm/yarn/bun). - Framework: Next.js 15.1.6 with React 19 for the component variant; the demo variant ships as a standalone `index.html` using the Tailwind Play CDN (no build step required). - Dependencies: `next@15.1.6`, `react@19.0.0`, `react-dom@19.0.0`, `next-themes@^0.4.4`. - Dev dependencies: `tailwindcss@^3.4.17`, `postcss@^8.5.1`, `autoprefixer@^10.4.20`, `typescript@^5.7.3`, `@types/react@^19.0.7`, `@types/react-dom@^19.0.3`, `@types/node@^22.10.7`. - Architecture rules enforced by this blueprint: - `darkMode: "class"` toggles a `.dark` class on ``; `next-themes` manages the class and the `system` preference without a flash of wrong theme. - No hardcoded grays. Every color is a semantic token (`background`, `onsurface`, `surface`, `surface-muted`, `edge`, `primary`) mapped to CSS variables defined once for `:root` (light) and overridden under `.dark`. - Token pairs are chosen to keep WCAG 2.1 AA contrast (4.5:1+): text uses `onsurface` on `background`/`surface`; primary interactive accents keep >= 4.5:1 on both themes. - Breakpoints are used only where layout reflows: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px). ## 2. Input/Output Data Contracts Input parameters (JSON Schema): ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "additionalProperties": false, "properties": { "sourceMarkup": { "type": "string", "minLength": 1, "description": "Raw HTML or JSX to convert" }, "mode": { "enum": ["nextjs", "plain-html"] }, "framework": { "enum": ["next"], "default": "next" }, "darkModeStrategy": { "enum": ["class", "media"], "default": "class" }, "breakpoints": { "type": "array", "items": { "enum": ["sm", "md", "lg", "xl"] }, "default": ["sm", "md", "lg", "xl"] } }, "required": ["sourceMarkup"] } ``` Output artifacts (exact paths): - `tailwind.config.js`, `postcss.config.js`, `app/globals.css`, `package.json` - `components/ResponsiveNavbar.tsx`, `components/Card.tsx`, `components/ThemeToggle.tsx` - `app/layout.tsx` (ThemeProvider wiring), `app/page.tsx` (demo usage) - `input-reference.html` (the raw, unconverted source markup) - `index.html` (plain-HTML demo variant using the Play CDN, no build step) ## 3. Production Reference Implementation One complete implementation. The first file is the raw input this skill converts; every following file is final and runnable: ``` # ========================================================= # FILE: input-reference.html (raw markup, BEFORE conversion) # =========================================================

Feature one

Description text for the first feature card.

Feature two

Description text for the second feature card.

# ========================================================= # FILE: package.json # ========================================================= { "name": "tailwind-responsive-darkmode", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "typecheck": "tsc --noEmit" }, "dependencies": { "next": "15.1.6", "next-themes": "^0.4.4", "react": "19.0.0", "react-dom": "19.0.0" }, "devDependencies": { "@types/node": "^22.10.7", "@types/react": "^19.0.7", "@types/react-dom": "^19.0.3", "autoprefixer": "^10.4.20", "postcss": "^8.5.1", "tailwindcss": "^3.4.17", "typescript": "^5.7.3" } } # ========================================================= # FILE: tailwind.config.js # ========================================================= /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./index.html" ], theme: { extend: { colors: { background: "rgb(var(--color-background) / )", onsurface: "rgb(var(--color-onsurface) / )", surface: "rgb(var(--color-surface) / )", "surface-muted": "rgb(var(--color-surface-muted) / )", edge: "rgb(var(--color-edge) / )", primary: "rgb(var(--color-primary) / )" }, spacing: { gutter: "1.5rem", section: "6rem" }, maxWidth: { shell: "80rem" } } }, plugins: [] }; # ========================================================= # FILE: postcss.config.js # ========================================================= /** @type {import('postcss-load-config').Config} */ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }; # ========================================================= # FILE: app/globals.css # ========================================================= @tailwind base; @tailwind components; @tailwind utilities; :root { --color-background: 255 255 255; --color-onsurface: 15 23 42; --color-surface: 241 245 249; --color-surface-muted: 226 232 240; --color-edge: 203 213 225; --color-primary: 37 99 235; } .dark { --color-background: 15 23 42; --color-onsurface: 248 250 252; --color-surface: 30 41 59; --color-surface-muted: 51 65 85; --color-edge: 71 85 105; --color-primary: 96 165 250; } @layer base { html { @apply scroll-smooth; } body { @apply bg-background text-onsurface antialiased; } ::selection { @apply bg-primary/20; } } # ========================================================= # FILE: components/ThemeToggle.tsx # ========================================================= "use client"; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; export function ThemeToggle() { const { resolvedTheme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return ( ); } const isDark = resolvedTheme === "dark"; const label = isDark ? "Switch to light mode" : "Switch to dark mode"; return ( ); } # ========================================================= # FILE: components/ResponsiveNavbar.tsx # ========================================================= "use client"; import { useState } from "react"; import Link from "next/link"; import { ThemeToggle } from "./ThemeToggle"; const NAV_LINKS = [ { href: "/", label: "Home" }, { href: "/features", label: "Features" }, { href: "/pricing", label: "Pricing" } ] as const; export function ResponsiveNavbar() { const [open, setOpen] = useState(false); return (

Acme UI

{NAV_LINKS.map((link) => ( {link.label} ))}

); } # ========================================================= # FILE: components/Card.tsx # ========================================================= import type { ReactNode } from "react"; type CardProps = { eyebrow?: string; title: string; children: ReactNode; footer?: ReactNode; }; export function Card({ eyebrow, title, children, footer }: CardProps) { return (

{eyebrow ? (

{eyebrow}

) : null}

{title}

{children}

{footer ?

{footer}

: null}

); } # ========================================================= # FILE: app/layout.tsx # ========================================================= import type { Metadata } from "next"; import type { ReactNode } from "react"; import { ThemeProvider } from "next-themes"; import "./globals.css"; export const metadata: Metadata = { title: "Acme UI", description: "Responsive, accessible, dark-mode ready components" }; export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) { return ( {children} ); } # ========================================================= # FILE: app/page.tsx # ========================================================= import { Card } from "../components/Card"; import { ResponsiveNavbar } from "../components/ResponsiveNavbar"; const FEATURES = [ { eyebrow: "Responsive", title: "Mobile first", body: "Breakpoints at sm, md, lg and xl reflow the grid from one column to three without JavaScript." }, { eyebrow: "Dark mode", title: "Class strategy", body: "darkMode: class swaps semantic color tokens so light and dark both pass 4.5:1 contrast." }, { eyebrow: "Accessible", title: "Keyboard ready", body: "Focus rings, aria-labels and visible states come out of the box on every interactive element." } ] as const; export default function HomePage() { return ( <>

Hero

Responsive by default, dark-mode ready

Semantic color tokens keep the interface on the same token pair in every theme, so WCAG contrast stays above 4.5:1 automatically.

{FEATURES.map((feature) => ( {feature.body} ))}

); } # ========================================================= # FILE: index.html (plain-HTML demo variant, no build step) # ========================================================= Tailwind responsive + dark mode demo

Card

One column on phones

sm:grid-cols-2, lg:grid-cols-3, xl:grid-cols-4 - no media queries needed.

Card

Tokens, not hardcoded grays

bg-surface swaps with .dark so contrast holds in both modes.

Card

Focus visible states

Every interactive element ships a visible focus ring.

Card

Raw HTML to Tailwind

This file is the drop-in index.html demo variant of the same markup.

``` ## 4. Execution Protocol & Step-by-Step Workflow ```bash # 1. Scaffold the Next.js project and install dependencies mkdir tailwind-responsive-darkmode cd tailwind-responsive-darkmode npm install # 2. Write tailwind.config.js, postcss.config.js, app/globals.css # 3. Write components: ResponsiveNavbar.tsx, Card.tsx, ThemeToggle.tsx # 4. Wire the theme provider in app/layout.tsx and the demo in app/page.tsx # 5. Generate the plain-HTML variant (index.html) for consumers with no JS toolchain # 6. Type-check and build npm run typecheck npm run build # 7. Interactive verification npm run dev # Resize the window: navbar collapses to the hamburger below md; grid reflows # at sm/lg/xl. Click the theme toggle: .dark is applied to , colors swap. # Verify contrast by tabbing: focus ring always visible. ``` ## 5. Edge Cases & Error Handling - Hydration mismatch with `next-themes`: suppress it by adding `suppressHydrationWarning` to `` and gating `ThemeToggle` render behind a `mounted` state; the SSR placeholder must not claim any theme. - Unknown color tokens become nonexistent utilities silently: if `bg-background` does not compile, verify the CSS variable exists in both `:root` and `.dark` and that `content` globs cover the file. - Alpha modifiers (`bg-background/80`) require the `rgb(var(--x) / )` declaration format; plain `var(--x)` breaks opacity utilities. - CDN Play build (`index.html`) is for prototyping only; the no-JS and no-CDN production path is the `next build` + `tailwindcss` CLI pipe in section 4. - JS disabled: the plain-HTML toggle degrades to the `.dark` class present in the initial markup; content, layout, and contrast remain usable. - Rollback: keep `input-reference.html` as the single source of truth; on a bad conversion, restore the reference and regenerate components rather than hand-patching utilities.