# @aparajita/tailwind-ionic 中文文档

规范地址：https://npmcn.com/package/%40aparajita/tailwind-ionic/

版本：2\.3\.0
npm 元数据更新时间：2024-04-23T21:12:07.036Z
中文译文更新时间：2026-11-06T12:08:09.555Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：161 kB，22 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=16\.16\.0
- 运行依赖：1 个
- peer 依赖：postcss ^8\.4\.21，tailwindcss ^3\.2\.7
- 首次发布：2022-07-21T18:24:21.142Z
- 最新版本发布：2024-04-23T21:12:06.840Z
- 近 30 天下载量：3275（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

电离线的尾风公用事业

## 安装

```sh
npm install @aparajita/tailwind-ionic
```

也可以使用：`pnpm add @aparajita/tailwind-ionic`、`yarn add @aparajita/tailwind-ionic`、`bun add @aparajita/tailwind-ionic`

## README

# @aparajita/ 尾风- 离子  [![npm version](https://badge.fury.io/js/@aparajita%2Ftailwind-ionic.svg)](https://badge.fury.io/js/@aparajita%2Ftailwind-ionic)

此插件用于 [尾风 CSS](https://tailwindcss.com/) 财务报告和审定财务报表 [无线](https://ionic-framework.com/) 提供若干特性:

-   帮助您在Ionic应用程序中瞄准特定平台和模式的变量.
-   A 类 `part` 以Ionic元件(或使用CSS元件的任何其他元件)为目标CSS部件的变体.
-   Ionic CSS主题变量被转换为Tailwind颜色.
-   一个 `ion-checked` 变体以瞄准Ionic复选框或无线电按钮的检查状态.

## 从 v1. x 中突破更改

-   V1.x中的非缩写变体(前缀为"离-")已去除.
-   这个 `ios` 财务报告和审定财务报表 `md` 变体已更名为 `mode-ios` 财务报告和审定财务报表 `mode-md`,并仅适用于 `mode` 属性 `html` 键.

## 安装

```shell
pnpm add @aparajita/tailwind-ionic
```

如果您只想要默认的变体和没有Ionic主题颜色, 请将插件添加到您的 `tailwind.config.js` 文件 :

```javascript
module.exports = {
  plugins: [require('@aparajita/tailwind-ionic')]
}
```

如果你想配置行为,请阅读.

## 使用量

### 平台/模式变体

下表中的平台/模式变体得到支持. 列表中更低的变体更为具体,在列表中更高的变体后适用. 这意味着适用于某一类的较不具体的变体将被适用于同一类的更具体的变体所取代.

注意,不能直接结合变体,但可以结合分化变体的效果.

| 备选案文 | 目标 |
| :-- | :-- |
| plt- 桌面 | 桌面模式 |
| 移动 | 类似移动的设备(包括浏览器模拟) |
| 移动网络 | 浏览器中的移动设备模拟模式 |
| 性质 | 使用 CAPacitor 的真正设备 |
| plt- ios 函数 | iOS 设备(包括浏览器模拟) |
| plt- 机器人 | Android 设备(包括浏览器模拟) |
| 模式图标 | App 属于 iOS 样式模式 |
| 模式 md | App 属于材料设计样式模式 |

#### 示例(有缩写变体名称)

```html
<!-- BAD. Can't combine these variants with others directly. -->
<ion-label class="plt-native:plt-ios:text-ion-color-primary" />

<!-- 
  GOOD. Separate variants combine.
  On a real iOS device, bold blue color. 
  On a real Android device, bold yellow color. 
-->
<ion-label
  class="
  plt-native:font-bold
  plt-ios:text-blue-500
  plt-android:text-yellow-500
"
/>

<!-- GOOD. More specific variant overrides. On a real iOS device, red color. -->
<ion-label class="plt-native:text-blue-500 plt-ios:text-red-500" />
```

### 部分变体

这个 `part-` 变体允许您在Ionic组件(或使用CSS组件的任何其他组件)中瞄准CSS部件. 当前定义的所有组件部分都作为自动完成建议在编辑器中提供。 部分变种可以与其他变种相合并.

#### 实例

```html
<!-- Make a button fully rounded -->
<ion-button class="part-native:rounded-full" />

<!-- Equivalent to: -->
<ion-button class="my-button" />

<style>
  .my-button::part(native) {
    @apply rounded-full;
  }
</style>
```

### 已检查的变体

这个 `ion-checked` 变量允许您瞄准已检查的状态 `ion-checkbox` 或者说 `ion-radio`它可与其他变体结合,特别是: `part-` 变体,以完成复杂的样式 `ion-checkbox` 财务报告和审定财务报表 `ion-radio` 组件完全与Tailwind.

#### 实例

这里有一个无线电组 使用图像的无线电按钮。 检查状态以蓝色环表示.

![Radio group with images](https://npmcn.com/package/%40aparajita/tailwind-ionic/example.png)

这是标记:

```html
<ion-radio-group
  v-model="appearance"
  class="flex w-full justify-around pt-5 pb-3"
>
  <div
    v-for="info in kAppearanceInfo"
    :key="info.label"
    class="relative flex flex-col items-center"
  >
    <ion-radio
      :value="info.value"
      class="m-0 h-[80px] w-[72px] rounded-lg part-container:border-none part-mark:hidden ion-checked:ring ion-checked:ring-blue-500"
    />
    <img
      :src="info.src"
      :alt="info.label"
      class="absolute inset-0 h-[80px] w-[72px] rounded-lg border"
      :class="info.class"
    />
    <p class="mt-2 text-sm text-ion-color-dark">
      {{ info.label }}
    </p>
  </div>
</ion-radio-group>
```

或者,比如说,如果你想要一个复选框 `yellow-500` 在不受限制的状态中 `indigo-500` 带有 `indigo-400` 在检查状态下的边界,您会这样做:

```html
<ion-checkbox
  class="
    part-container:!bg-yellow-500 
    ion-checked:part-container:!bg-indigo-500 
    ion-checked:part-container:!border-indigo-400
  "
/>
```

请注意: `part-container` 用于瞄准复选框标记本身和 `!` 以取代Ionic样式.

### 主题颜色

如果您将插件一个或多个有效的路径传递到包含Ionic主题变量的 CSS 文件,它们会被转换为Tailwind主题颜色.

```javascript
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */

const ionic = require('@aparajita/tailwind-ionic')

module.exports = {
  plugins: [ionic('src/theme/variables.css')]
}
```

您也可以通过路径作为 `.theme` 选项对象的属性,或带有一个 `.theme` 属性。 这使得您可以访问Ionic主题文件以及您自己的定制文件.

```javascript
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */

const ionic = require('@aparajita/tailwind-ionic')

module.exports = {
  plugins: [ionic({
    theme: 'src/theme/variables.css',
  })]
}
```

```javascript
/** @type {import('tailwindcss/types').Config} */
/** @type {import('@aparajita/tailwind-ionic').plugin} */

const ionic = require('@aparajita/tailwind-ionic')

module.exports = {
  plugins: [ionic([
    'src/theme/variables.css',
    'assets/css/theme.css',
    require.resolve('@ionic/vue/css/palettes/dark.class.css'),
  )]
}
```

#### 示例

如果文件 `variables.css` 这是:

```css
/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /* ...lots more */
}
```

然后,你有效的 Tailwind 配置 最终是:

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        // ...whatever colors you have in your tailwind.config.js
        
        'ion-color-primary': 'var(--ion-color-primary)',
        'ion-color-primary-rgb': 'var(--ion-color-primary-rgb)',
        'ion-color-primary-contrast': 'var(--ion-color-primary-contrast)',
        'ion-color-primary-contrast-rgb': 'var(--ion-color-primary-contrast-rgb)',
        'ion-color-primary-shade': 'var(--ion-color-primary-shade)',
        'ion-color-primary-tint': 'var(--ion-color-primary-tint)',
        // ...and so on
      }
    }
  }
}
```

由于变量是彩色调色板的一部分,它们被添加到所有的"Tailwind"彩色公用事业中:文本,bg,边框等.

```html
<ion-label class="text-ion-color-primary">My label</ion-label>
<span class="text-ion-color-success">Success!</span>
<div class="bg-ion-color-background">
  <!-- content -->
</div>
<div class="border-ion-color-tertiary-tint">
  <!-- content -->
</div>
```

## 常见问题

### @aparajita/tailwind-ionic 是什么？

电离线的尾风公用事业

### 如何安装 @aparajita/tailwind-ionic？

在项目目录运行 npm install @aparajita/tailwind-ionic，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：postcss（^8\.4\.21）、tailwindcss（^3\.2\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aparajita/tailwind-ionic 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aparajita/tailwind-ionic 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @aparajita/tailwind-ionic 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=16\.16\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aparajita/tailwind-ionic 可以商用吗？

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

### @aparajita/tailwind-ionic 的下载量有多少？

根据 npm 官方下载统计，@aparajita/tailwind-ionic 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,275 次，日均约 109 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aparajita/tailwind-ionic 还在维护吗？

最新版本 2\.3\.0 发布于 2024/04/24（2 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/07/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。