mcreate

mcreate package

Installation

``bash
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):

`css
@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.

$3

1. Link the package globally:
`bash
cd mpackages/packages/mcreate
npm link
`

2. Link it in your Next.js project:
`bash
cd your-nextjs-project
npm link @kgalexander/mcreate
`

3. Update your project's next.config.ts to support external symlinks:
`ts
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.

$3

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:
`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

$3

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

`ts
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;
``