core/docs/installation-next.md at main · react-zero-ui/core · GitHub

76 lines (55 loc) · 1.44 KB

Next.js (App Router) Setup

Install the dependencies

npm install @react-zero-ui/core

npm install @tailwindcss/postcss

Add the PostCSS plugin (must come before Tailwind).

// postcss.config.* ESM Syntax
const config = {
	//  Zero-UI must come before Tailwind
	plugins: ["@react-zero-ui/core/postcss", "@tailwindcss/postcss"],
};
export default config;

// postcss.config.* Common Module Syntax
module.exports = {
	//  Zero-UI must come before Tailwind
	plugins: { "@react-zero-ui/core/postcss": {}, tailwindcss: {} },
};

Import Tailwind CSS

// global.css
@import "tailwindcss";

Start the App

npm run dev

Zero-UI will generate a .zero-ui folder in your project root. and generate the attributes.ts and type definitions for it.

Preventing FOUC (Flash Of Unstyled Content)

Spread bodyAttributes on <body> in your root layout.

// app/layout.tsx
import { bodyAttributes } from "./.zero-ui/attributes";

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			// Spread the bodyAttributes on the body tag
			<body {...bodyAttributes}>{children}</body>
		</html>
	);
}

Thats it. Zero-UI will now add used data-* attributes to the body tag and the CSS will be injected and transformed by tailwind.

Checkout our Experimental SSR Safe OnClick Handler

Zero UI OnClick