nuxt-ui-tailwind-to-scss

To migrate Nuxt UI components to SCSS without breaking the public API, translate Tailwind variants into BEM-based SCSS blocks while preserving component props and slots. This converts runtime components into self-contained SCSS blocks that operate independently.

Yes, you can convert Tailwind variants to BEM SCSS in Vue projects. The migration process maps Tailwind/TV class translations one-to-one into SCSS using CSS variables and a BEM naming scheme to ensure maintainable styling.

When migrating Nuxt UI to self-contained SCSS, the process automatically scaffolds necessary shared utilities. It auto-creates missing shared composables and styles, generating the required infrastructure under the src/shared/ui directory.

Converting Nuxt UI runtime components to SCSS requires a frontmatter-defined SKILL.md entry but minimizes manual styling setup. You provide the Nuxt UI component path and run the migration to automatically generate the self-contained SCSS component.

The SCSS transformations from Nuxt UI migrations are safe to reverse. The process validates safe, reversible transformations to ensure maintainability while decoupling components from the Nuxt UI runtime environment.