@shiage/next
v0.1.1
Published
Next.js plugin for Shiage — inspect and edit CSS in Chrome DevTools, save changes to source as Tailwind classes.
Maintainers
horacechoiReadme
@shiage/next
Next.js plugin for Shiage — inspect and edit CSS in Chrome DevTools, save changes to source as Tailwind classes.
Install
pnpm i -D @shiage/nextYou'll also need Tailwind CSS (v3 or v4) somewhere in your Next build.
Use
// next.config.mjs
import withShiage from '@shiage/next'
/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true }
export default withShiage(nextConfig)// app/layout.tsx (App Router)
import { ShiageDevScripts } from '@shiage/next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ShiageDevScripts />
</body>
</html>
)
}ShiageDevScripts emits the inlined runtime + WS port <meta> in dev and renders null in
production. For the Pages Router, drop it inside <body> in _document.tsx.
Webpack only (v0.1)
Turbopack ignores Next's webpack() callback, so the JSX source-location stamper Shiage
relies on never runs under Turbopack in v0.1.
- Next 15.x still defaults to webpack — plain
next devworks. - Next 16+ defaults to Turbopack — run
next dev --webpack.
If the runtime didn't boot you'll see a one-shot console warning explaining why. Turbopack support is planned for v1.1.
What's supported / not
See the main README for the properties table, framework caveats, and FAQ.
License
MIT — © 2026 Horace Choi.