Tailwind CSS Preset for Prettier

This package provides a predefined, opinionated Prettier configuration suitable for any TypeScript-based web project with Tailwind CSS classes.

This preset includes the following plugin, which is installed along with the preset package:

• prettier-plugin-tailwindcss

Installation

Install the @rainstormy/presets-prettier-tailwind package and its peer dependencies:

npm install --save-dev @rainstormy/presets-prettier-tailwind prettier

pnpm install --save-dev @rainstormy/presets-prettier-tailwind prettier

yarn add --dev @rainstormy/presets-prettier-tailwind prettier

Usage

Create or extend a Prettier configuration file (prettier.config.js) and apply the prettierPresetTailwind preset.

For example:

import { prettierPresets } from "@rainstormy/presets-prettier"
import { prettierPresetTailwind } from "@rainstormy/presets-prettier-tailwind"

export default prettierPresets({
	additionalPresets: [
		// ...other presets...
		prettierPresetTailwind(),
	],
})

In Combination with CSS Declarations

For example:

import { prettierPresets } from "@rainstormy/presets-prettier"
import { prettierPresetCss } from "@rainstormy/presets-prettier-css"
import { prettierPresetTailwind } from "@rainstormy/presets-prettier-tailwind"

export default prettierPresets({
	additionalPresets: [
		prettierPresetCss(),
		prettierPresetTailwind(),
	],
})