@jmlweb/prettier-config-tailwind 1.0.0

package/README.md

@@ -0,0 +1,128 @@
+# @jmlweb/prettier-config-tailwind
+
+[![npm version](https://img.shields.io/npm/v/@jmlweb/prettier-config-tailwind)](https://www.npmjs.com/package/@jmlweb/prettier-config-tailwind)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-339933.svg)](https://nodejs.org/)
+
+> Prettier configuration with Tailwind CSS class sorting. Extends `@jmlweb/prettier-config-base` with automatic Tailwind class organization.
+
+## ✨ Features
+
+- 🎨 **Tailwind Class Sorting**: Automatically sorts Tailwind CSS classes in the recommended order
+- 🔧 **Base Config Included**: Inherits all settings from `@jmlweb/prettier-config-base`
+- 🚀 **Zero Configuration**: Works out of the box with Tailwind projects
+- 📦 **Plugin Integration**: Uses `prettier-plugin-tailwindcss` for optimal class ordering
+
+## 📦 Installation
+
+```bash
+npm install --save-dev @jmlweb/prettier-config-tailwind prettier prettier-plugin-tailwindcss
+```
+
+**Note**: The `prettier-plugin-tailwindcss` plugin must be installed as a dev dependency.
+
+## 🚀 Quick Start
+
+### Option 1: Using `package.json` (Recommended)
+
+Add to your `package.json`:
+
+```json
+{
+  "prettier": "@jmlweb/prettier-config-tailwind"
+}
+```
+
+### Option 2: Using `.prettierrc.js`
+
+Create a `.prettierrc.js` file in your project root:
+
+```javascript
+module.exports = require('@jmlweb/prettier-config-tailwind');
+```
+
+## 💡 Examples
+
+### Before Formatting
+
+```jsx
+<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+  Click me
+</button>
+```
+
+### After Formatting (Classes Automatically Sorted)
+
+```jsx
+<button className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+  Click me
+</button>
+```
+
+The plugin automatically sorts classes following Tailwind's recommended order:
+
+1. Layout (display, position, etc.)
+2. Flexbox & Grid
+3. Spacing (padding, margin)
+4. Sizing (width, height)
+5. Typography
+6. Backgrounds
+7. Borders
+8. Effects (shadows, etc.)
+9. Transforms & Transitions
+10. Interactivity (hover, focus, etc.)
+
+## 📋 Configuration
+
+This package extends `@jmlweb/prettier-config-base` and adds:
+
+- ✅ All base configuration options:
+  - Semicolons, single quotes, 2-space indentation
+  - Trailing commas, LF line endings
+  - And all other base settings
+- ✅ `prettier-plugin-tailwindcss` - Automatically sorts Tailwind CSS classes
+
+## 🔧 Usage with Scripts
+
+Add formatting scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\""
+  }
+}
+```
+
+## 🎯 When to Use
+
+Use this package when:
+
+- ✅ You're using Tailwind CSS in your project
+- ✅ You want consistent class ordering across your codebase
+- ✅ You want to follow Tailwind's recommended class order
+- ✅ You want automatic class sorting on save/format
+
+For projects without Tailwind, use [`@jmlweb/prettier-config-base`](../prettier-config-base) instead.
+
+## 🔗 Related Packages
+
+- [`@jmlweb/prettier-config-base`](../prettier-config-base) - Base Prettier configuration (extended by this package)
+- [`@jmlweb/eslint-config-base`](../eslint-config-base) - ESLint config for TypeScript projects
+
+## ⚠️ Important Notes
+
+1. **Plugin Installation**: Make sure `prettier-plugin-tailwindcss` is installed. It's a peer dependency.
+2. **Class Ordering**: The plugin uses Tailwind's recommended class order. This may differ from your current ordering.
+3. **Performance**: The plugin must be loaded last in Prettier's plugin chain (it handles this automatically).
+
+## 📝 Requirements
+
+- **Node.js** >= 18.0.0
+- **Prettier** >= 3.0.0
+- **prettier-plugin-tailwindcss** (peer dependency)
+
+## 📄 License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_prettier_config_base = __toESM(require("@jmlweb/prettier-config-base"), 1);
+var config = {
+  ...import_prettier_config_base.default,
+  plugins: ["prettier-plugin-tailwindcss"]
+};
+var index_default = config;

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { Config } from 'prettier';
+
+declare const config: Config;
+
+export { config as default };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Config } from 'prettier';
+
+declare const config: Config;
+
+export { config as default };

package/dist/index.js

@@ -0,0 +1,10 @@
+// src/index.ts
+import baseConfig from "@jmlweb/prettier-config-base";
+var config = {
+  ...baseConfig,
+  plugins: ["prettier-plugin-tailwindcss"]
+};
+var index_default = config;
+export {
+  index_default as default
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@jmlweb/prettier-config-tailwind",
+  "version": "1.0.0",
+  "description": "Prettier configuration for jmlweb projects with Tailwind CSS support",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": [
+    "prettier",
+    "prettier-config",
+    "tailwind",
+    "tailwindcss",
+    "code-formatter"
+  ],
+  "author": "jmlweb",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmlweb/tooling.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jmlweb/tooling/issues"
+  },
+  "homepage": "https://github.com/jmlweb/tooling/tree/main/packages/prettier-config-tailwind#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "prettier": "^3.0.0"
+  },
+  "dependencies": {
+    "@jmlweb/prettier-config-base": "workspace:*",
+    "prettier-plugin-tailwindcss": "^0.6.9"
+  },
+  "devDependencies": {
+    "@jmlweb/tsconfig-internal": "workspace:*",
+    "prettier": "^3.3.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}