ink-tailwind

English | 简体中文

English

ink-tailwind is a sophisticated styling engine for Ink that bridges the gap between web-based CSS paradigms and CLI terminal rendering. It brings the power of Tailwind CSS, StyleX-inspired APIs, and standard CSS files to the terminal.

Features

• 🚀 Tailwind CSS Support: Use familiar Tailwind utility classes via a unified className API.
• 💅 StyleX-inspired API: Type-safe, predictable styling with create() and props().
• 🎨 CSS Support: Import standard .css files and use them in your terminal components.
• 🛠️ Rolldown Plugin: Build-time CSS transformation for maximum performance.
• 📦 Unified Components: Custom Box and Text wrappers that handle all styling sources automatically.

Installation

npm install ink-tailwind
# or
pnpm add ink-tailwind

Usage

1. Unified API (Tailwind + StyleX)

The easiest way to use ink-tailwind is through its unified components:

import { Box, Text, create } from 'ink-tailwind';

const styles = create({
  header: {
    bold: true,
    color: 'yellow'
  }
});

const MyComponent = () => (
  <Box className="flex-col p-2 bg-blue border-single">
    <Text style={styles.header}>Hello World!</Text>
    <Text className="text-red italic">Tailwind styling in CLI</Text>
  </Box>
);

2. CSS File Support

Import standard CSS files (requires Rolldown plugin):

import { Box, Text } from 'ink-tailwind';
import styles from './App.css';

const MyComponent = () => (
  <Box style={styles.container}>
    <Text className="text-blue">Styled via CSS file!</Text>
  </Box>
);

3. Rolldown Plugin

Add it to your rolldown.config.ts:

import { inkTailwindPlugin } from 'ink-tailwind';

export default {
  // ...
  plugins: [inkTailwindPlugin()],
};

简体中文

ink-tailwind 是一个为 Ink 打造的高级样式引擎，旨在弥合 Web CSS 范式与 CLI 终端渲染之间的鸿沟。它将 Tailwind CSS、类 StyleX API 以及标准 CSS 文件支持带到了终端开发中。

特性

• 🚀 Tailwind CSS 支持: 通过统一的 className API 使用熟悉的 Tailwind 工具类。
• 💅 StyleX 启发式 API: 使用 create() 和 props() 进行类型安全、可预测的样式编写。
• 🎨 CSS 支持: 导入标准 .css 文件并在终端组件中使用。
• 🛠️ Rolldown 插件: 构建时 CSS 转换，确保最佳性能。
• 📦 统一组件: 自定义 Box 和 Text 包装器，自动处理所有样式来源。

安装

npm install ink-tailwind
# 或
pnpm add ink-tailwind

使用方法

1. 统一 API (Tailwind + StyleX)

使用 ink-tailwind 最简单的方式是通过其提供的统一组件：

import { Box, Text, create } from 'ink-tailwind';

const styles = create({
  header: {
    bold: true,
    color: 'yellow'
  }
});

const MyComponent = () => (
  <Box className="flex-col p-2 bg-blue border-single">
    <Text style={styles.header}>你好，世界！</Text>
    <Text className="text-red italic">终端中的 Tailwind 样式</Text>
  </Box>
);

2. CSS 文件支持

导入标准 CSS 文件（需要 Rolldown 插件）：

import { Box, Text } from 'ink-tailwind';
import styles from './App.css';

const MyComponent = () => (
  <Box style={styles.container}>
    <Text className="text-blue">通过 CSS 文件定义样式！</Text>
  </Box>
);

3. Rolldown 插件

在 rolldown.config.ts 中添加：

import { inkTailwindPlugin } from 'ink-tailwind';

export default {
  // ...
  plugins: [inkTailwindPlugin()],
};

作者

dmblock

开源协议

GPL-3.0