# tailwind-csstree

> CSSTree syntax for parsing Tailwind custom syntax.

Latest version **0.4.0** (published 2026-09-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install tailwind-csstree
pnpm add tailwind-csstree
yarn add tailwind-csstree
bun add tailwind-csstree
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-09-02 |
| First published | 2025-06-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.18 |
| Dependencies | 0 |
| Unpacked size | 64.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 33 |
| Author | Nicholas C. Zaks |
| Maintainers | nzakas |
| Keywords | csstree, tailwind, tailwindcss, css, css-tree |

## Links

- npm: https://www.npmjs.com/package/tailwind-csstree
- Repository: https://github.com/humanwhocodes/tailwind-csstree
- Homepage: https://github.com/humanwhocodes/tailwind-csstree#readme
- Issues: https://github.com/humanwhocodes/tailwind-csstree/issues
- Funding: https://github.com/sponsors/nzakas
- npm.io page: https://npm.io/package/tailwind-csstree

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2026-09-02
- 0.3.3 — 2026-06-09
- 0.3.2 — 2026-05-20
- 0.3.1 — 2026-04-10
- 0.3.0 — 2026-03-24
- 0.2.0 — 2026-03-20
- 0.1.5 — 2026-03-16
- 0.1.4 — 2025-09-01
- 0.1.3 — 2025-08-08
- 0.1.2 — 2025-07-25
- 0.1.1 — 2025-06-17
- 0.1.0 — 2025-06-05

## README

# Tailwind CSSTree

by [Nicholas C. Zakas](https://humanwhocodes.com)

If you find this useful, please consider supporting my work with a [donation](https://humanwhocodes.com/donate).

## Description

Tailwind custom syntax in CSSTree format.

## Installation

```shell
npm install tailwind-csstree
```

## Usage

This package exports the following objects:

- `tailwind3` - CSSTree syntax extensions for Tailwind 3 syntax
- `tailwind4` - CSSTree syntax extensions for Tailwind 4 syntax

You can import them like this:

```js
import { tailwind3, tailwind4 } from "tailwind-csstree";
```

### Use with ESLint CSS Plugin

To use this package with the [ESLint CSS plugin](https://github.com/eslint/css), use `languageOptions.customSyntax` to specify the Tailwind version you'd like to use in your `eslint.config.js` file:

```js
// eslint.config.js
import { defineConfig } from "eslint/config";
import css from "@eslint/css";
import { tailwind4 } from "tailwind-csstree";

export default defineConfig([
	{
		files: ["**/*.css"],
		plugins: {
			css,
		},
		language: "css/css",
		languageOptions: {
			customSyntax: tailwind4,
		},
		rules: {
			"css/no-empty-blocks": "error",
		},
	},
]);
```

**Note:** Not all ESLint CSS plugin rules will work with Tailwind syntax. That's something I'm actively working on.

### Use with CSSTree directly

If you're using [CSSTree](https://github.com/eslint/csstree) directly, you

```js
import { fork } from "@eslint/css-tree";
import { tailwind4 } from "tailwind-csstree";

const { parse, toPlainObject } = fork(tailwind4);

const result = parse("@config 'tailwind.config.js'");
console.log(toPlainObject(result));
```

## License

Copyright 2025 Nicholas C. Zakas

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

---
_Source: https://npm.io/package/tailwind-csstree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._