@rainstormy/presets-eslint-tailwind

Tailwind CSS Preset for ESLint

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

This preset configures a subset of rules from the following plugin, which is installed along with the preset package:

• eslint-plugin-tailwindcss (with rule names prefixed by tailwind/)

Installation

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

npm install --save-dev @rainstormy/presets-eslint-tailwind @rainstormy/presets-eslint eslint typescript tailwindcss

pnpm install --save-dev @rainstormy/presets-eslint-tailwind @rainstormy/presets-eslint eslint typescript tailwindcss

yarn add --dev @rainstormy/presets-eslint-tailwind @rainstormy/presets-eslint eslint typescript tailwindcss

Usage

Create or extend a flat ESLint configuration file (eslint.config.js) and apply the eslintPresetTailwind preset.

For example (with the default options in comments):

import { eslintPresets } from "@rainstormy/presets-eslint"
import { eslintPresetTailwind } from "@rainstormy/presets-eslint-tailwind"

export default eslintPresets({
	additionalPresets: [
		// ...other presets...
		eslintPresetTailwind({
			// targetFilePatterns: ["**/*.@(jsx|tsx)"],
		}),
	],
})