@hawaii-gov/shared-theme-package

v1.11.0

Published

Shared Tailwind theme config and base styles for Next.js apps

Readme

@hawaii-gov/shared-theme-package

Shared Tailwind theme tokens and reusable base/component styles for Next.js apps.

Install

npm install @hawaii-gov/shared-theme-package

Usage (Next.js + Tailwind v4)

  1. Import the package stylesheet from your global CSS file.
/* app/globals.css */
@import "@hawaii-gov/shared-theme-package/styles.css";
  1. Ensure your root layout imports globals.css.
// app/layout.tsx
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Usage (Tailwind config preset style)

If your setup uses tailwind.config.js, extend your project with this package as a preset:

// tailwind.config.js
module.exports = {
  presets: [require("@hawaii-gov/shared-theme-package")],
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
};

Exports

  • @hawaii-gov/shared-theme-package
  • @hawaii-gov/shared-theme-package/tailwind.config
  • @hawaii-gov/shared-theme-package/styles.css

Notes

  • This package expects tailwindcss version ^4.0.0 as a peer dependency.

Publish to GitHub Packages

  1. Create a classic personal access token on GitHub with:
  • write:packages
  • read:packages
  • repo (only needed for private repository flows)
  1. In your terminal, set the token in this session:
$env:GITHUB_TOKEN = "<your_github_pat>"
  1. Publish:
npm publish
  1. Install from another project (authenticated):
npm install @hawaii-gov/shared-theme-package