# @dreamsicle\.io/stylelint-config-tailwindcss 中文文档

规范地址：https://npmcn.com/package/%40dreamsicle.io/stylelint-config-tailwindcss/

版本：1\.3\.2
npm 元数据更新时间：2026-11-05T17:40:28.730Z
中文译文更新时间：2026-11-12T19:41:01.381Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dreamsicle.io/stylelint-config-tailwindcss
原文对照：https://npmcn.com/package/%40dreamsicle.io/stylelint-config-tailwindcss/?lang=original
项目主页：https://github.com/dreamsicle-io/stylelint-config-tailwindcss
源码仓库：https://github.com/dreamsicle-io/stylelint-config-tailwindcss

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：39.4 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：stylelint ^16\.17\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2025-10-28T05:19:37.829Z
- 最新版本发布：2026-11-05T17:40:28.421Z
- 近 30 天下载量：46570（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 6 个）

## 中文简介

Tailwind CSS 项目的样式林特配置 .

## 安装

```sh
npm install @dreamsicle.io/stylelint-config-tailwindcss
```

也可以使用：`pnpm add @dreamsicle.io/stylelint-config-tailwindcss`、`yarn add @dreamsicle.io/stylelint-config-tailwindcss`、`bun add @dreamsicle.io/stylelint-config-tailwindcss`

## README

# 样式林特配置: 尾风 CSS

[![Awesome Stylelint](https://awesome.re/badge.svg)](https://stylelint.io/awesome-stylelint/) [![NPM Downloads](https://img.shields.io/npm/dy/%40dreamsicle.io%2Fstylelint-config-tailwindcss?label=npm)](https://www.npmjs.com/package/@dreamsicle.io/stylelint-config-tailwindcss)

A 类 [样式林](https://stylelint.io/) 配置 [尾风 CSS](https://tailwindcss.com/) 项目。 专门为 **尾风 CSS v4+** 财务报告和审定财务报表 **斯泰林特 v16.17+ (英语)** 使用新语法 `languageOptions`,此配置之所以创建,是因为Tailwind CSS的其他受欢迎的Stylelint配置大多只是忽略指令和函数. 相反,此配置将全部执行 [尾风CSS指令和功能](https://tailwindcss.com/docs/functions-and-directives) 作为语法 [斯泰林特的语言选项](https://stylelint.io/user-guide/configure/#languageoptions);所以不仅不用斯德林特抱怨就可以使用它们,而且斯德林特实际上会帮助确保你正确使用它们.

## 开始

### 安装软件包

```shell
npm install --save-dev @dreamsicle.io/stylelint-config-tailwindcss
```

### 在样式林特配置中包含

```javascript
/**
 * @type {import("stylelint").Config}
 */
const stylelintConfig = {
    extends: [
        "stylelint-config-standard",
        "@dreamsicle.io/stylelint-config-tailwindcss",
    ],
};

export default stylelintConfig;
```

## 出口

该套件输出一个无害环境管理模块和一个共同的联署材料模块。 默认导出是无害环境管理模块.

-   `dist/stylelint.config.mjs` - 无害环境管理
-   `dist/stylelint.config.cjs` - 共同联合来文

### 访问特定密钥

您也可以决定将导入的配置扩展到您的样式林特对象 `languageOptions`, (中文(简体) ), `languageOptions.syntax`, (中文(简体) ), `languageOptions.syntax.types`, (中文(简体) ), `languageOptions.syntax.properties`,或 `languageOptions.syntax.atRules`. 以下是如何充分传播这个配置所提供的一切的例子.

```javascript
import configTailwindcss from "@dreamsicle.io/stylelint-config-tailwindcss/dist/stylelint.config.mjs";

/**
 * @type {import("stylelint").Config}
 */
const stylelintConfig = {
    extends: [
        "stylelint-config-standard",
    ],
    languageOptions: {
        ...configTailwindcss.languageOptions,
        syntax: {
            ...configTailwindcss.languageOptions.syntax,
            types: {
                ...configTailwindcss.languageOptions.syntax.types,
            },
            properties: {
                ...configTailwindcss.languageOptions.syntax.properties,
            },
            atRules: {
                ...configTailwindcss.languageOptions.syntax.atRules,
            },
        }
    },
    rules: {
        ...configTailwindcss.rules,
    }
};

export default stylelintConfig;
```

> **说明:** 需要所有类型、属性、规则和Stylelint规则才能使这种配置正常运行。 它没有提供风格规则,因为它包含了使Stylelint与Tailwind CSS发挥良好的需要.

## 兼容性

此配置用于 **尾风 CSS v4+**然而,Tailwind的文件指出,一些旧指令可能仍然用于 [兼容性](https://tailwindcss.com/docs/functions-and-directives#compatibility)。虽然这不属于此配置的范围,但您可以继续使用遗留指令,如 `@config` 财务报告和审定财务报表 `@plugin` 把它们纳入 `languageOptions.syntax` 手动.

```javascript
/**
 * @type {import("stylelint").Config}
 */
const stylelintConfig = {
    extends: [
        "stylelint-config-standard",
        "@dreamsicle.io/stylelint-config-tailwindcss",
    ],
    languageOptions: {
        syntax: {
            atRules: {
                /**
                 * @see https://tailwindcss.com/docs/functions-and-directives#config-directive
                 */
                config: {
                    prelude: "<string>",
                },
                /**
                 * @see https://tailwindcss.com/docs/functions-and-directives#plugin-directive
                 */
                plugin: {
                    prelude: "<string>",
                },
            },
        },
    },
};
```

> **说明:** 这个 [`theme()`](https://tailwindcss.com/docs/functions-and-directives#theme-function) 函数已贬值,不应使用。 使用 [CSS 主题变量](https://tailwindcss.com/docs/theme#using-your-theme-variables) 换句话说.

## 发展

此软件包有一个构建脚本,将仅生成Stylelint语言选项所需要覆盖的语法来 sumport Tailwind CSS 函数和指令. 通过升级语法从 [CSS 树](https://www.npmjs.com/package/css-tree) 包括由 [{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢](https://npmcn.com/package/%40dreamsicle.io/stylelint-config-tailwindcss/@csstools/css-syntax-patches-for-csstree),这些是Stylelint在引擎盖下使用的同一套软件包.

这是利用我们 `SyntaxGenerator` 类,通过 a [滚动](https://rollupjs.org/) 插件 。 这些文件的内容被构建到 `syntax` 目录,然后导入,并通过滚动构建为 **无害环境管理模块** (单位:千美元) **共同联合来文** 模块位于 `dist` 目录.

这些文件的内容传递给斯泰林特 `languageOptions.syntax` 通过配置模板在 `src/stylelint.config.mjs`。 类型、属性和规则的生成允许自动升级CSS语法,以接受 Tailwind CSS 属性,只要这些属性以尽可能最小的破坏性和最可维持的方式被接受.

### 开始

```
npm start
```

> **说明:** 此脚本将按监视模式滚动运行, 这样配置模板的更改会自动重建 .

### 构建

```
npm run build
```

> **说明:** 此脚本将运行滚动以创建一个构建, 完成后退出 .

### 测试

```
npm test
```

> **说明:** 这将运行样式lint 以对抗在 `tests` 目录.

### 修补

```
npm run fix
```

> **说明:** 这将运行样式林特在 _修补_ 模式与在 `tests` 目录.

### 干净

```
npm run clean
```

> **说明:** 这将清理所有已建的文件和依赖性 .

## 常见问题

### @dreamsicle\.io/stylelint-config-tailwindcss 是什么？

Tailwind CSS 项目的样式林特配置 \.

### 如何安装 @dreamsicle\.io/stylelint-config-tailwindcss？

在项目目录运行 npm install @dreamsicle\.io/stylelint-config-tailwindcss，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：stylelint（^16\.17\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dreamsicle\.io/stylelint-config-tailwindcss 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dreamsicle\.io\_\_stylelint-config-tailwindcss 是否存在。

### @dreamsicle\.io/stylelint-config-tailwindcss 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dreamsicle\.io/stylelint-config-tailwindcss 可以商用吗？

@dreamsicle\.io/stylelint-config-tailwindcss 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dreamsicle\.io/stylelint-config-tailwindcss 的下载量有多少？

根据 npm 官方下载统计，@dreamsicle\.io/stylelint-config-tailwindcss 在 2026/10/13 – 2026/11/11 这 30 天内被下载 46,570 次，日均约 1,552 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dreamsicle\.io/stylelint-config-tailwindcss 还在维护吗？

最新版本 1\.3\.2 发布于 2026/11/06（7 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 6 个；首次发布于 2025/10/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。