mcreate

mcreate package

Installation

npm install @kgalexander/mcreate

Tailwind CSS v4 Setup

This package uses Tailwind CSS utility classes. For styles to work correctly, you need to configure Tailwind to scan the package for class names.

Add the @source directive to your globals.css (or main CSS file):

@import "tailwindcss";

@source "../node_modules/@kgalexander/mcreate";

Why is this needed? Tailwind CSS v4 doesn't scan node_modules by default. The @source directive tells Tailwind to include class names from this package when compiling your CSS.

Local Development with npm link

When using npm link to develop this package locally with a Next.js application, you need to configure Next.js to resolve symlinked packages outside the project directory.

Setup

1. Link the package globally:

   cd mpackages/packages/mcreate
   npm link

2. Link it in your Next.js project:

   cd your-nextjs-project
   npm link @kgalexander/mcreate

3. Update your project's next.config.ts to support external symlinks:

   import type { NextConfig } from "next";
   import path from "path";
   
   const nextConfig: NextConfig = {
     transpilePackages: ['@kgalexander/mcreate'],
     outputFileTracingRoot: path.join(__dirname, "../"),
   };
   
   export default nextConfig;

   Note: Adjust the "../" path to point to the common parent directory containing both your Next.js project and the mpackages folder.

Why is this needed?

Turbopack (used by Next.js) doesn't support reading files or symlinks outside your project directory by default. The outputFileTracingRoot option expands the allowed directory scope to include the linked packages.

Deploying to Vercel

Important: The outputFileTracingRoot configuration breaks Vercel deployments. Before deploying:

1. Remove outputFileTracingRoot from your next.config.ts:

   import type { NextConfig } from "next";
   
   const nextConfig: NextConfig = {
     transpilePackages: ['@kgalexander/mcreate'],
   };
   
   export default nextConfig;

2. Run npm install to ensure the package is installed from npm (not linked)

3. Deploy to Vercel

Quick Toggle

You can keep both configurations in your next.config.ts and comment/uncomment as needed:

import type { NextConfig } from "next";
import path from "path";

// Production config (for Vercel deployment)
const nextConfig: NextConfig = {
  transpilePackages: ['@kgalexander/mcreate'],
};

// Local development config (for npm link)
// const nextConfig: NextConfig = {
//   transpilePackages: ['@kgalexander/mcreate'],
//   outputFileTracingRoot: path.join(__dirname, "../"),
// };

export default nextConfig;