mttwm

library1.7.2jsnpmunverified

mttwm (Material To TailWind Migrator) is an automated CLI tool (v1.7.2) that transforms React components using Material-UI makeStyles/useStyles to Tailwind CSS classes. It runs as a one-off migration via npx or global install, supports dry-run, configurable theme mappings, responsive breakpoints, and generates detailed reports. Unlike manual migration scripts, it handles complex CSS-in-JS scenarios, preserves unmigrated styles, and cleans up unused imports. No npm dependencies required by end users; uses TypeScript internally.

devops

npm install mttwm

package ↗

INSTALL

IMPORT

SIG · MTTWM

mttwm

devopsjavascriptv1.7.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

mttwm CLI

✓ npx mttwm migrate --pattern 'src/**/*.tsx' --dry-run

✗ npm install mttwm && mttwm migrate src/

Using npx is recommended to avoid global install; the tool is primarily used via CLI, not as a library import.

config file

✓ // mttwm.config.js export default { customThemeMapping: {} };

✗ module.exports = { customThemeMapping: {} };

Config file uses ESM export syntax. If your project uses CommonJS, name it mttwm.config.mjs or use dynamic import in your CJS config.

global installation

✓ npm install -g mttwm

✗ npm install mttwm --save-dev (then run via npx)

Global install is optional; npx works without installation. If installed globally, CLI command is 'mttwm' without npx.

Shows typical usage: dry-run to preview changes, then apply migration with pattern matching, report generation, and custom config.

# Preview migration on all .tsx files in src/ (dry run) npx mttwm migrate --pattern "src/**/*.tsx" --dry-run # Apply the migration npx mttwm migrate --pattern "src/**/*.tsx" # Generate a detailed report npx mttwm migrate --pattern "src/**/*.tsx" --generate-report # Exclude test files and preserve original files as backup npx mttwm migrate --pattern "src/**/*.tsx" --exclude "**/*.test.tsx" --preserve-original # With custom theme mapping (create mttwm.config.js first) npx mttwm migrate --pattern "src/**/*.tsx"

Debug

Known issues

gotchaThe tool only transforms files matching the provided pattern. Files outside the pattern are ignored, which may lead to incomplete migration if multiple file extensions are used (e.g., .jsx).

fix

Specify multiple patterns if needed, e.g., --pattern 'src/**/*.tsx' --pattern 'src/**/*.jsx'

affects: >=1.0.0

gotchaThe --dry-run flag does not modify files, but it still reads and parses all matched files. For very large projects, this can take significant time.

fix

Narrow the pattern to specific directories first, e.g., --pattern 'src/components/**/*.tsx'

affects: >=1.0.0

gotchaCustom theme properties not explicitly mapped in mttwm.config.js will cause errors during migration. The tool does not infer mappings for arbitrary Material-UI theme values.

fix

Create a mttwm.config.js with customThemeMapping that maps each unknown theme property to a Tailwind class, e.g., 'theme.custom.primary': 'bg-blue-500'

affects: >=1.0.0

deprecatedNo known deprecations in v1.7.2. Check CHANGELOG for future changes.

fix

N/A

affects: >=1.0.0

Errors

Common errors & fixes

Error: Unknown theme property 'theme.custom.primary'

The tool encountered a Material-UI theme value that is not mapped in the configuration.

fix

Add the missing mapping to mttwm.config.js: export default { customThemeMapping: { 'theme.custom.primary': 'bg-blue-500' } };

ENOENT: no such file or directory, open 'mttwm.config.js'

The tool expects a config file if custom mappings are needed, but it's missing.

fix

Create mttwm.config.js in your project root with an export default object. If no custom mappings are needed, ensure the file exists but can be empty export default {};

SyntaxError: Unexpected token 'export'

The mttwm.config.js file uses ESM export syntax but the project is compiled or loaded with CommonJS.

fix

Rename the config file to mttwm.config.mjs, or use .cjs with module.exports = { ... };

Upgrade

Version history

1.7.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

Amazon

Resources

packagemttwm ↗