@rainstormy/presets-prettier-css

CSS Preset for Prettier

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

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

• prettier-plugin-css-order

Installation

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

npm install --save-dev @rainstormy/presets-prettier-css postcss prettier

pnpm install --save-dev @rainstormy/presets-prettier-css postcss prettier

yarn add --dev @rainstormy/presets-prettier-css postcss prettier

Usage

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

For example:

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

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

In Combination with Tailwind CSS

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(),
	],
})