prettier-plugin-nativewind

0.2.3 verified Sat Apr 25 auth: no javascript deprecated

A deprecated Prettier plugin for sorting Tailwind CSS classes in NativeWind projects. Version 0.2.3 is the final release. This fork added support for custom props, function calls, and tagged template literals beyond what upstream prettier-plugin-tailwindcss offered. However, as of prettier-plugin-tailwindcss v0.3.0 and later, all these features are natively supported, making this plugin obsolete. Users should migrate to the official plugin. No further updates are planned.

Common errors

error Cannot find module 'prettier-plugin-nativewind' ↓

cause The package is not installed or is missing from node_modules.

fix

Run npm install prettier-plugin-nativewind --save-dev or yarn add -D prettier-plugin-nativewind.

error Error: Invalid plugin options. Expected an array of strings for `tailwindCustomProps`. ↓

cause Option tailwindCustomProps (or similar) is not an array of strings.

fix

Ensure the option is an array, e.g., tailwindCustomProps: ['className'].

error TypeError: Cannot destructure property 'tailwindConfig' of 'undefined' or 'null'. ↓

cause The plugin cannot find a Tailwind CSS configuration file or the config is invalid.

fix

Ensure you have a tailwind.config.js or tailwind.config.ts in your project root, or configure the tailwindConfig option in Prettier config.

Warnings

deprecated Package is deprecated; use prettier-plugin-tailwindcss instead. ↓

fix Replace prettier-plugin-nativewind with prettier-plugin-tailwindcss in devDependencies and remove any custom configuration specific to this fork (e.g., tailwindCustomProps).

gotcha Peer dependencies include many optional peer deps like @ianvs/prettier-plugin-sort-imports. Installing them may cause conflicts if not needed. ↓

fix Only install peer deps that are actually required by your project. The plugin works without them if you don't use those features.

gotcha The plugin uses regular expressions for custom props/functions; starting a string with '^' enables regex mode. This can lead to unexpected matches if not used carefully. ↓

fix Use exact string matches unless you specifically need regex. For example, '^[a-z]+ClassName$' matches any prop ending with 'ClassName'.

breaking In v0.2.0, the option names changed: tailwindCustomProps replaced a previous undocumented option. ↓

fix Update config to use the new option names if upgrading from v0.1.x.

Install

npm install prettier-plugin-nativewind

yarn add prettier-plugin-nativewind

pnpm add prettier-plugin-nativewind

Imports

default (plugin)

wrong

import or require the plugin directly in code – it is a Prettier plugin, not a programmatic API.

correct

Add to prettier config as a plugin: module.exports = { plugins: ['prettier-plugin-nativewind'] }

No JavaScript import needed; the plugin is automatically detected by Prettier when listed in config.

Quickstart

Shows how to configure the plugin with custom props and function calls, and demonstrates class sorting.

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-nativewind'],
  tailwindCustomProps: ['className', 'containerClassName'],
  tailwindCustomFunctions: ['cva'],
  tailwindCustomTaggedTemplates: ['tw']
};

// Input
const el = <div className="px-4 py-2 bg-blue-500 text-white"></div>;

// Output (sorted)
const el = <div className="bg-blue-500 px-4 py-2 text-white"></div>;