Prettier Setup

Overview

@zayne-labs/prettier-config provides a modular Prettier configuration with automatic plugin detection, smart import sorting, and Tailwind CSS v4 support.

Key Features

Modular factory system with toggleable features
Smart import sorting with distance-based logic
Tailwind CSS v4 ready with advanced class sorting
Auto-installation prompts for missing plugins
Deduplicated configuration merging

Installation

pnpm add -D @zayne-labs/prettier-config

Basic Setup

Create a prettier.config.js file in your project root:

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  base: true, // Enabled by default
  sortImports: true, // Enabled by default
});

The configuration uses a factory function that combines different config segments based on your needs.

Configuration Options

The zayne factory accepts an options object with the following properties:

base

boolean | Config

default:true

Opinionated base defaults for Prettier formatting.

sortImports

boolean | OptionsSortImports

default:true

Enables @ianvs/prettier-plugin-sort-imports for smart import organization.

tailwindcss

boolean | OptionsTailwindCss

default:false

Enables Tailwind CSS and ClassNames plugins for class sorting.

astro

boolean | OptionsAstro

default:false

Enables prettier-plugin-astro for Astro component formatting.

Import Sorting

When sortImports is enabled (default), imports are automatically organized by “distance” from the current file.

Sorting Order

User patterns

Custom patterns you pass via importOrder are prioritized at the top.

URLs

Remote modules (e.g., https://esm.sh/...).

Protocols

Built-ins and protocol imports (node:, bun:, jsr:, npm:).

Packages

Third-party modules (e.g., react, lodash).

Aliases

Local aliases like @/, #, ~, $, %.

Paths

Relative and absolute file paths (excluding CSS).

CSS

Style files are always pushed to the absolute bottom.

Custom Import Order

Override the default import order:

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  sortImports: {
    importOrder: [
      "^@core/(.*)$", // Core modules first
      "^@app/(.*)$", // App modules
      "^[./]", // Relative imports
    ],
  },
});

Disable Import Sorting

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  sortImports: false,
});

Tailwind CSS Support

The Tailwind integration combines three plugins for optimal class handling:

prettier-plugin-tailwindcss: Sorts classes
prettier-plugin-classnames: Multi-line formatting & attribute support
prettier-plugin-merge: Ensures plugins work together

Enable Tailwind support

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: true,
});

Install plugins

When you run prettier --write ., you’ll be prompted to install missing plugins:

pnpm i -D prettier-plugin-tailwindcss prettier-plugin-classnames prettier-plugin-merge

Tailwind CSS v4

For Tailwind CSS v4 projects, specify your CSS entry point:

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    tailwindStylesheet: "./src/styles/tailwind.css",
  },
});

Advanced Tailwind Options

Custom Attributes
Custom Functions
End Position
Syntax Transformation

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    customAttributes: ["classNames", "classes", "styled"],
  },
});

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    customFunctions: ["cn", "tv", "tw", "clsx"],
  },
});

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    endPosition: "absolute", // or 'relative'
  },
});

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    syntaxTransformation: true,
  },
});

Astro Support

Enable Prettier formatting for Astro components:

Enable Astro support

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  astro: true,
});

Install plugin

pnpm i -D prettier-plugin-astro

Extending Configurations

The factory accepts any number of extra configuration objects as subsequent arguments:

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne(
  {
    tailwindcss: true,
    sortImports: true,
  },
  // Extra config objects to merge
  {
    printWidth: 120,
    semi: true,
    singleQuote: false,
    tabWidth: 4,
  },
  // Another config object
  {
    overrides: [
      {
        files: "*.md",
        options: {
          printWidth: 80,
        },
      },
    ],
  }
);

Plugin Auto-Installation

This config won’t bloat your node_modules with unused plugins. When you enable a feature, it checks if the required plugins are installed.

If plugins are missing, you’ll be prompted to auto-install them when you run prettier --write .

Example Configurations

React with Tailwind

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  base: true,
  sortImports: true,
  tailwindcss: {
    customFunctions: ["cn", "clsx"],
  },
});

Next.js with Custom Import Order

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne(
  {
    sortImports: {
      importOrder: [
        "^@/lib/(.*)$",
        "^@/components/(.*)$",
        "^@/app/(.*)$",
        "^[./]",
      ],
    },
    tailwindcss: true,
  },
  {
    printWidth: 100,
  }
);

Astro with Tailwind v4

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  astro: true,
  tailwindcss: {
    tailwindStylesheet: "./src/styles/tailwind.css",
  },
});

Minimal Configuration

prettier.config.js

import { zayne } from "@zayne-labs/prettier-config";

export default zayne(
  {
    sortImports: false, // Disable import sorting
  },
  {
    semi: false,
    singleQuote: true,
  }
);

Package Scripts

Add these scripts to your package.json:

package.json

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

IDE Integration

VS Code
Neovim

Install the Prettier extension and add to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Use conform.nvim or none-ls:

require("conform").setup({
  formatters_by_ft = {
    javascript = { "prettier" },
    typescript = { "prettier" },
    javascriptreact = { "prettier" },
    typescriptreact = { "prettier" },
  },
})

Get Started

Packages

Guides

Overview

Key Features

Installation

Basic Setup

Configuration Options

Import Sorting

Sorting Order

Custom Import Order

Disable Import Sorting

Tailwind CSS Support

Tailwind CSS v4

Advanced Tailwind Options

Astro Support

Extending Configurations

Plugin Auto-Installation

Example Configurations

Package Scripts

IDE Integration

Next Steps

ESLint Setup

API Reference

Build docs developers (and LLMs) love

Get Started

Packages

Guides

Documentation Index

​Overview

​Key Features

​Installation

​Basic Setup

​Configuration Options

​Import Sorting

​Sorting Order

​Custom Import Order

​Disable Import Sorting

​Tailwind CSS Support

​Tailwind CSS v4

​Advanced Tailwind Options

​Astro Support

​Extending Configurations

​Plugin Auto-Installation

​Example Configurations

​Package Scripts

​IDE Integration

​Next Steps

ESLint Setup

API Reference

Build docs developers (and LLMs) love

Overview

Key Features

Installation

Basic Setup

Configuration Options

Import Sorting

Sorting Order

Custom Import Order

Disable Import Sorting

Tailwind CSS Support

Tailwind CSS v4

Advanced Tailwind Options

Astro Support

Extending Configurations

Plugin Auto-Installation

Example Configurations

Package Scripts

IDE Integration

Next Steps