@bitfactory/stylelint-config/docs/01-installation.md

Stylelint sharable config for Bitfactory NL (part of NOBEARS) projects

# Installation

> [!NOTE]
> When using Docker with `[p]npm` Make recipes add `make` before every command, and surround instruction with quotes.

Install the Stylelint config and required dependencies:

```bash
# Using pnpm (recommended)
pnpm add @bitfactory/stylelint-config --save-dev --save-exact

# Using npm
npm install @bitfactory/stylelint-config --save-dev --save-exact
```

## Peer Dependencies

If your project uses `.npmrc` with auto-install configuration, peer dependencies will be installed automatically. Ensure your `.npmrc` includes `auto-install-peers=true`, for example:

```ini
auto-install-peers=true
package-import-method=copy
save-exact=true
update-notifier=false
```

If you're not using auto-install, install peer dependencies manually:

```bash
pnpm dlx install-peerdeps --dev --extra-args="-E" @bitfactory/stylelint-config
# or: npx install-peerdeps --dev --extra-args="-E" @bitfactory/stylelint-config
```

## PostCSS & SASS/SCSS Installation

Syntax-specific dependencies (`postcss-html`, `postcss-scss`, `stylelint-scss`) are marked as optional peer dependencies. They'll be automatically installed when needed, or you can install them manually if you prefer explicit control.

For PostCSS projects (includes Vue support):

```bash
pnpm add postcss-html --save-dev --save-exact
# or: npm install postcss-html --save-dev --save-exact
```

For SASS/SCSS projects:

```bash
pnpm add postcss-scss stylelint-scss --save-dev --save-exact
# or: npm install postcss-scss stylelint-scss --save-dev --save-exact
```

For Vue 3 enhanced features (`:deep()`, `v-bind()`, etc.), also install:

```bash
pnpm add stylelint-config-recommended-vue --save-dev --save-exact
# or: npm install stylelint-config-recommended-vue --save-dev --save-exact
```

## Tailwind CSS Support

This package provides separate configurations for Tailwind CSS v3 and v4:

- **Tailwind CSS v3**: Use `@bitfactory/stylelint-config/tailwind`
- **Tailwind CSS v4**: Use `@bitfactory/stylelint-config/tailwindcss`

Both configurations require `postcss-html` for Vue support (see PostCSS installation above).

Choose the configuration that matches your Tailwind CSS version. See [Configuration](./02-configuration.md) for usage examples.