🎨 @harshalkatakiya/prettier-config

A shareable Prettier configuration by Harshal Katakiya, with built-in support for Tailwind CSS and a simple CLI setup command to quickly integrate Prettier into your projects.

📑 Table of Contents

📖 Introduction
🌟 Features
🚀 Installation & Usage
- ⚡ Automatic CLI Setup
- 🔧 Manual Setup
📜 Scripts
⚙️ Configuration Options
🤝 Contributing
📄 License
👤 Author

📖 Introduction

@harshalkatakiya/prettier-config is a shareable Prettier configuration designed to provide consistent code formatting across projects.

✅ Opinionated rules for clean, readable, and maintainable code.
🌀 Built-in Tailwind CSS support via prettier-plugin-tailwindcss.
⚡ Easy CLI setup – installs dependencies, creates configs, and updates package.json. 📜 Prettier scripts for easy formatting and validation.

Whether you’re starting a new project or integrating Prettier into an existing one, this package streamlines your setup process.

🌟 Features

✔ Pre-configured Prettier Rules – Opinionated defaults for better readability.
🎨 Tailwind CSS Support – Formats Tailwind classes with prettier-plugin-tailwindcss.
⚡ Automatic Setup – One command sets up everything in seconds.
📂 Project Type Detection – Generates prettier.config.ts (TypeScript) or prettier.config.js (JavaScript).
🛠 Customizable – Extend or override the base configuration.
🚀 Modern & Up-to-Date – Works with the latest Prettier and Tailwind CSS versions.

🚀 Installation & Usage

⚡ Automatic CLI Setup

The simplest way to set up Prettier with this configuration is to use the CLI command. Run the following in your project root:

npx @harshalkatakiya/prettier-config add

✅ Prompts for Tailwind CSS support and applies the appropriate configuration.
🔄 Installs dependencies (prettier, @harshalkatakiya/prettier-config, and prettier-plugin-tailwindcss if needed).
📂 Generates configuration files (prettier.config.js and .prettierignore).
📜 Updates package.json scripts to include prettier commands.

After setup:
Check your generated prettier.config.js. Update paths if needed.

🔧 Manual Setup

If you prefer manual installation, follow these steps:

1️⃣ Install Dependencies

npm install --save-dev prettier @harshalkatakiya/prettier-config prettier-plugin-tailwindcss

2️⃣ Create Configuration File

Without Tailwind CSS:

import baseConfig from '@harshalkatakiya/prettier-config';

export default { ...baseConfig };

With Tailwind CSS (v3):

import baseConfig from '@harshalkatakiya/prettier-config';

export default {
  ...baseConfig,
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindConfig: './tailwind.config.js',
  tailwindFunctions: ['cn']
};

With Tailwind CSS (v4):

import baseConfig from '@harshalkatakiya/prettier-config';

export default {
  ...baseConfig,
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindStylesheet: './src/app/globals.css', // update this path yo your main CSS file
  tailwindFunctions: ['cn']
};

3️⃣ Create a `.prettierignore` File

node_modules
dist
build

4️⃣ Update `package.json` Scripts

{
  "scripts": {
    "prettier:check": "prettier -c .",
    "prettier": "prettier -w -u ."
  }
}

📜 Scripts

The following scripts are added to your package.json:

Command	Description
`npm run prettier`	Formats all files in the project.
`npm run prettier:check`	Checks for unformatted code.

⚙️ Configuration Options

This package comes with the following Prettier rules pre-configured:

Option	Value	Description
`experimentalTernaries`	`true`	Enables experimental ternary formatting.
`printWidth`	`80`	The maximum line width.
`tabWidth`	`2`	Number of spaces per indentation level.
`useTabs`	`false`	Use spaces for indentation.
`semi`	`true`	Add semicolons at the end of statements.
`singleQuote`	`true`	Use single quotes instead of double quotes.
`quoteProps`	`as-needed`	Quote object properties only when required.
`jsxSingleQuote`	`true`	Use single quotes in JSX.
`trailingComma`	`none`	Do not add trailing commas.
`bracketSpacing`	`true`	Add spaces between brackets in object literals.
`bracketSameLine`	`true`	Keep the closing bracket of a JSX element on the same line.
`arrowParens`	`always`	Always include parentheses in arrow functions.
`singleAttributePerLine`	`false`	Allow multiple attributes on a single line.
`embeddedLanguageFormatting`	`auto`	Automatically format embedded languages.

Tailwind-specific settings (if enabled):

Tailwind CSS v3:

plugins: ["prettier-plugin-tailwindcss"],
tailwindConfig: "./tailwind.config.js",
tailwindFunctions: ["cn"]

Tailwind CSS v4:

plugins: ["prettier-plugin-tailwindcss"],
tailwindStylesheet: "./src/app/globals.css", // update this path yo your main CSS file
tailwindFunctions: ["cn"]

🤝 Contributing

💡 Want to contribute? Open an issue or submit a PR on the GitHub repository.

How to Contribute

1️⃣ Fork the repository.
2️⃣ Create a new branch for your feature or fix.
3️⃣ Commit your changes with a descriptive message.
4️⃣ Open a pull request and describe your changes.

📄 License

This package is licensed under the MIT License.

👤 Author