Skip to content
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,9 +184,12 @@ Most rules are intended to automatically fix the tailwind classes. If you have i

```jsonc
{
// enable ESLint to fix tailwind classes on save
// enable VSCode to fix tailwind classes on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
// ESLint
"source.fixAll.eslint": "explicit",
// Oxlint
"source.fixAll.oxc": "explicit"
}
Comment thread
schoero marked this conversation as resolved.
Outdated
}
```
Expand Down
22 changes: 20 additions & 2 deletions docs/parsers/angular.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
# Angular

## Flat config
- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To use ESLint with Angular, install [Angular ESLint](https://github.com/angular-eslint/angular-eslint?tab=readme-ov-file#quick-start) and [TypeScript ESLint](https://typescript-eslint.io/getting-started). You can follow the [flat config](https://github.com/angular-eslint/angular-eslint/blob/main/docs/CONFIGURING_FLAT_CONFIG.md) setup, which includes rules from the Angular ESLint package or you can add the parser directly by following the steps below.

Expand All @@ -17,8 +22,12 @@ To lint Tailwind CSS classes in Angular files, ensure that:

<br/>

### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -73,7 +82,7 @@ export default defineConfig([
<br/>

<details>
<summary>Legacy config</summary>
<summary><h3>Legacy config</h3></summary>
Comment thread
schoero marked this conversation as resolved.

<br/>

Expand Down Expand Up @@ -132,3 +141,12 @@ export default defineConfig([
```

</details>

<br/>

## Oxlint

Oxlint currently does **not** support Angular templates and inline template processing.
Framework-specific parsers/processors like Angular are not supported in Oxlint yet, so `eslint-plugin-better-tailwindcss` cannot currently lint Angular templates through Oxlint.

You can continue using ESLint for Angular files until Oxlint adds framework parser support.
22 changes: 20 additions & 2 deletions docs/parsers/astro.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
# Astro

## Flat config
- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To use ESLint with Astro files, first install the [astro-eslint-parser](https://github.com/ota-meshi/astro-eslint-parser) and optionally [TypeScript ESLint](https://typescript-eslint.io/getting-started). Then, configure ESLint to use this parser for Astro files.

Expand All @@ -17,8 +22,12 @@ To lint Tailwind CSS classes in Astro files, ensure that:

<br/>

### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -62,7 +71,7 @@ export default defineConfig({
<br/>

<details>
<summary>Legacy config</summary>
<summary><h3>Legacy config</h3></summary>
Comment thread
schoero marked this conversation as resolved.

<br/>

Expand Down Expand Up @@ -115,3 +124,12 @@ export default defineConfig({
```

</details>

<br/>

## Oxlint

Oxlint currently does **not** support Astro files (`.astro`).
Framework-specific parsers like Astro are not supported in Oxlint yet, so `eslint-plugin-better-tailwindcss` cannot currently lint Astro templates through Oxlint.

You can continue using ESLint for Astro files until Oxlint adds framework parser support.
20 changes: 19 additions & 1 deletion docs/parsers/css.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# CSS

- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To use ESLint with CSS files containing Tailwind CSS `@apply` directives, first install the [@eslint/css](https://github.com/eslint/css) plugin and the [tailwind-csstree](https://www.npmjs.com/package/tailwind-csstree) custom syntax.

```sh
Expand All @@ -15,10 +22,12 @@ To lint Tailwind CSS classes in CSS files, ensure that:

<br/>

## Flat config
### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -65,3 +74,12 @@ export default defineConfig({
<br/>

> **Note:** Legacy config is not supported for CSS files as the `@eslint/css` plugin requires the ESLint flat config format.

<br/>

## Oxlint

Oxlint currently does **not** support CSS parser integration for this use case.
Because Oxlint currently only supports JavaScript-like files, `eslint-plugin-better-tailwindcss` cannot currently lint CSS `@apply` directives through Oxlint.

You can continue using ESLint for CSS files until broader parser support is available in Oxlint.
22 changes: 20 additions & 2 deletions docs/parsers/html.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# HTML

- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To use ESLint with HTML files, first install the [@html-eslint/parser](https://github.com/yeonjuan/html-eslint/tree/main/packages/parser).

```sh
Expand All @@ -14,10 +21,12 @@ To lint Tailwind CSS classes in HTML files, ensure that:

<br/>

## Flat config
### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -56,7 +65,7 @@ export default defineConfig({
<br/>

<details>
<summary>Legacy config</summary>
<summary><h3>Legacy config</h3></summary>
Comment thread
schoero marked this conversation as resolved.

<br/>

Expand Down Expand Up @@ -89,3 +98,12 @@ export default defineConfig({
```

</details>

<br/>

## Oxlint

Oxlint currently does **not** support HTML parser integration for this use case.
Because Oxlint currently only supports JavaScript-like files, `eslint-plugin-better-tailwindcss` cannot currently lint standalone HTML files through Oxlint.

You can continue using ESLint for HTML files until broader parser support is available in Oxlint.
53 changes: 50 additions & 3 deletions docs/parsers/javascript.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
# JavaScript

- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To lint Tailwind CSS classes in JavaScript files, ensure that:

- The plugin is added to your configuration.
- The `settings` object contains the correct Tailwind CSS configuration paths.

<br/>

## Usage

### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -44,7 +51,7 @@ export default defineConfig({
<br/>

<details>
<summary>Legacy config</summary>
<summary><h3>Legacy config</h3></summary>
Comment thread
schoero marked this conversation as resolved.

<br/>

Expand Down Expand Up @@ -74,3 +81,43 @@ export default defineConfig({
```

</details>

<br/>

## Oxlint

The Oxlint configuration currently requires to set up each rule individually.
Comment thread
schoero marked this conversation as resolved.
Outdated
More info about the Oxlint configuration format can be found in the [Oxlint documentation](https://oxc.rs/docs/guide/usage/linter/config.html).

To lint Tailwind CSS classes in JavaScript files, ensure that:

- The plugin is added to the `jsPlugins` array.
- The `settings` object contains the correct Tailwind CSS configuration paths.
- All relevant rules are added to the `rules` object.

<br/>

```js
// oxlint.config.js

import { defineConfig } from "oxlint";

export default defineConfig({
overrides: [{
files: ["**/*.{js,ts,jsx,cjs,mjs,tsx}"],
Comment thread
schoero marked this conversation as resolved.
Outdated
jsPlugins: [
"eslint-plugin-better-tailwindcss"
],
rules: {
"better-tailwindcss/enforce-consistent-line-wrapping": ["warn", { printWidth: 100 }],
"better-tailwindcss/no-duplicate-classes": "warn"
// ... add additional rules here
}
}],
settings: {
"better-tailwindcss": {
entryPoint: "src/global.css"
}
}
});
```
55 changes: 51 additions & 4 deletions docs/parsers/jsx.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
# JSX

- [ESLint](#eslint)
- [Oxlint](#oxlint)

<br/>

## ESLint

To lint Tailwind CSS classes in JSX files, ensure that:

- `jsx` parsing is enabled.
- `jsx` parsing is enabled in language options.
- The plugin is added to your configuration.
- The `settings` object contains the correct Tailwind CSS configuration paths.

<br/>

## Usage

### Flat config

Read more about the [ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new)

<br/>

```js
// eslint.config.js

Expand Down Expand Up @@ -53,7 +60,7 @@ export default defineConfig({
<br/>

<details>
<summary>Legacy config</summary>
<summary><h3>Legacy config</h3></summary>
Comment thread
schoero marked this conversation as resolved.

<br/>

Expand Down Expand Up @@ -92,3 +99,43 @@ export default defineConfig({
```

</details>

<br/>

## Oxlint

The Oxlint configuration currently requires to set up each rule individually.
Comment thread
schoero marked this conversation as resolved.
Outdated
More info about the Oxlint configuration format can be found in the [Oxlint documentation](https://oxc.rs/docs/guide/usage/linter/config.html).

To lint Tailwind CSS classes in JSX files, ensure that:

- The plugin is added to the `jsPlugins` array.
- The `settings` object contains the correct Tailwind CSS configuration paths.
- All relevant rules are added to the `rules` object.

<br/>

```js
// oxlint.config.js

import { defineConfig } from "oxlint";

export default defineConfig({
overrides: [{
files: ["**/*.{js,jsx,mjs,cjs}"],
jsPlugins: [
"eslint-plugin-better-tailwindcss"
],
rules: {
"better-tailwindcss/enforce-consistent-line-wrapping": ["warn", { printWidth: 100 }],
"better-tailwindcss/no-duplicate-classes": "warn"
// ... add additional rules here
}
}],
settings: {
"better-tailwindcss": {
entryPoint: "src/global.css"
}
}
});
```
Loading
Loading