{"uid":"cap_QA3lkS-JVf4XhpsSi829a","slug":"tenjin-article-tailwind-v4-dark-mode-class-toggle-fix-f556ea69","name":"Tenjin Article: Tailwind v4 Dark Mode Class Toggle Fix","description":"Tailwind v4 silently broke class-based dark mode toggles: the tested next-themes setup for Next.js App Router. As of 2026-08-08. Tested on Next.js 16.3.0 (App Router, production build), Tailwind CSS 4.3.3, next-themes 0.4.6, React 19.2.x. All claims below verified by inspecting the compiled CSS and the served HTML of next build && next start, not from docs. Tailwind v4 removed darkMode: 'class' (there is no tailwind.config.js key anymore; v4 is CSS-first). By default, dark: utilities compile to a media query only: So a theme switcher that toggles a dark class on (which is exactly what next-themes","url":"https://tenjin.blog/api/read/0xe4c16d163d80fd972e6e1e9b94bc71c5fbe5a9c5/tailwind-v4-silently-broke-class-based-dark-mode-toggles-the-tested-next-themes","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"pathParams":{"type":"object","required":["handle","slug"],"properties":{"slug":{"type":"string","description":"The article's URL slug, unique per creator. The reserved slug `latest` resolves to the creator's newest published piece; its stable scheduled-read form is the wallet-address URL /api/read/<0x-address>/latest (a handle `latest` is not payable)."},"handle":{"type":"string","description":"The creator's handle, or their wallet address. The address form is REQUIRED for a durable `latest` alias (a handle `latest` is not payable), and is the only form for an unclaimed creator."}}},"queryParams":{"type":"object","required":[],"properties":{},"additionalProperties":false}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object"}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.01","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.01/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_9EmDJI9b3KNaFngkj6OV5","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.01","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Retrieves the full text of a pay-per-read article explaining how Tailwind v4 broke class-based dark mode toggles and how to fix it with next-themes on Next.js App Router.","exampleAgentPrompt":"Fetch me the full Tenjin article on how Tailwind v4 silently broke class-based dark mode toggles and the tested next-themes fix for Next.js App Router — the one at wallet address 0xe4c16d163d80fd972e6e1e9b94bc71c5fbe5a9c5.","exampleUseCases":[{"title":"Debug Tailwind v4 dark mode regression","prompt":"My dark mode toggle stopped working after upgrading to Tailwind v4 — can you pull that Tenjin article about the class-based dark mode breakage and the next-themes fix for Next.js App Router?"},{"title":"Verify production dark mode behavior","prompt":"I need to understand exactly what changed in Tailwind v4 around dark: utilities compiling to media queries instead of class selectors — fetch the full Tenjin piece on that from creator wallet 0xe4c16d163d80fd972e6e1e9b94bc71c5fbe5a9c5."},{"title":"Migrate next-themes setup for Tailwind v4","prompt":"Can you get me that paid article on Tenjin about migrating the next-themes dark mode setup to be compatible with Tailwind CSS 4.3.3 and Next.js 16 App Router production builds?"}],"resultDescription":"Returns a JSON object containing the full text and metadata of the article, including a verified technical explanation of how Tailwind v4's CSS-first approach removed the darkMode: 'class' config key, causing dark: utilities to compile to media queries only, and the tested workaround using next-themes on Next.js App Router.","failureModes":["Payment not submitted or invalid x402 challenge response — article content not returned","Invalid wallet address or slug results in 404 not found","Stale or cached content if article is updated after payment","Network timeout on slow connections"],"whenToPreferThis":"Use this endpoint when you need the full verified text of this specific article about Tailwind v4 dark mode class breakage with next-themes. It is the only source for this pay-per-read piece by this creator. Prefer it over generic web searches when you need the complete, tested, production-verified technical walkthrough rather than partial forum answers or documentation.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-09-14T12:33:07.379Z","isFirstParty":false}