Guides

Styling Automation

Every component in AuthCore shares the same glassmorphism theme. The package now installs and updates that CSS bundle automatically, so consumers no longer need to copy Tailwind tokens by hand.

Post-install wizard

Right after npm install codalware-auth, the postinstall script copies dist/styles/authcore.css into your project using INIT_CWD. You will see output similar to the snippet below.

npm install

The helper creates styles/authcore-theme.css by default. Delete the file before reinstalling if you want to regenerate it from scratch.

Import once, everywhere

Add the generated CSS file to your root layout (App Router) or custom App component (Pages Router). All bundled components—including the ones in this documentation—expect those variables.

app/layout.tsx

Extend the design tokens

The theme is just Tailwind CSS. You can override or extend it through your own configuration. Make sure Tailwind scans node_modules/codalware-auth/dist so utility classes stay tree-shaked correctly.

tailwind.config.js

Rebuild CSS after tweaks

If you change styles/globals.css or Tailwind tokens inside the package, run the build pipeline again to regenerate dist/styles/authcore.css before distributing.

Terminal