https://github.com/mautops/obsidian-plugin-seed
Obsidian TailwindCSS Sample Plugin
https://github.com/mautops/obsidian-plugin-seed
Last synced: 8 months ago
JSON representation
Obsidian TailwindCSS Sample Plugin
- Host: GitHub
- URL: https://github.com/mautops/obsidian-plugin-seed
- Owner: mautops
- Created: 2025-06-30T13:51:08.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-30T13:53:02.000Z (12 months ago)
- Last Synced: 2025-09-09T21:25:58.838Z (9 months ago)
- Language: TypeScript
- Size: 54.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Obsidian TailwindCSS Sample Plugin
一个使用现代技术栈构建的Obsidian插件示例，集成了TailwindCSS v4、React 19和TypeScript。
## ✨ 特性
- 🎨 **TailwindCSS v4** - 最新的CSS框架，支持CSS-first配置
- ⚛️ **React 19** - 最新的React版本，支持并发特性
- 🔷 **TypeScript** - 完整的类型安全
- 🚀 **Vite** - 快速的构建工具
- 📱 **响应式设计** - 适配不同屏幕尺寸
- 🎯 **Obsidian主题集成** - 完美融入Obsidian界面
## 🚀 快速开始
### 安装依赖
```bash
npm install
```
### 开发模式
```bash
# 单次构建
npm run dev
# 监听文件变化自动构建
npm run dev:watch
```
### 生产构建
```bash
npm run build
```
### 代码检查
```bash
# 运行ESLint检查
npm run lint
# 自动修复ESLint问题
npm run lint:fix
# TypeScript类型检查
npm run type-check
```
### 清理构建文件
```bash
npm run clean
```
## 📁 项目结构
```
obsidian-rising-tasks/
├── src/
│ ├── main.ts # 插件入口文件
│ ├── App.tsx # React应用主组件
│ ├── ExampleView.tsx # 示例视图组件
│ └── index.css # TailwindCSS样式和主题配置
├── .vscode/ # VS Code配置
├── dist/ # 构建输出目录
├── manifest.json # Obsidian插件清单
├── package.json # 项目配置和依赖
├── tsconfig.json # TypeScript配置
├── vite.config.ts # Vite构建配置
└── postcss.config.js # PostCSS配置
```
## 🎨 TailwindCSS v4 使用
### 自定义Obsidian主题类
项目预定义了一系列Obsidian主题相关的工具类：
```tsx
// 背景色
主背景
次背景
// 文本色
普通文本
弱化文本
强调文本
// 组合类
卡片样式
普通按钮
主要按钮
```
### CSS变量支持
所有样式都基于Obsidian的CSS变量，确保与主题完美适配：
```css
/* 自动适配当前主题 */
.custom-element {
background-color: var(--background-primary);
color: var(--text-normal);
border-color: var(--border-color);
}
```
## 🛠️ 开发指南
### 添加新组件
1. 在`src/`目录下创建新的`.tsx`文件
2. 使用TailwindCSS类进行样式设计
3. 导入并在`App.tsx`中使用
### 自定义样式
在`src/index.css`的`@layer utilities`块中添加自定义工具类：
```css
@layer utilities {
.my-custom-class {
@apply bg-background-primary text-normal p-4 rounded;
}
}
```
### 类型定义
项目使用严格的TypeScript配置，确保：
- 启用所有严格检查选项
- 使用最新的ES2020特性
- 完整的React类型支持
## 📦 构建优化
### 生产构建优化
- **代码分割**: 自动分割大型依赖
- **Tree Shaking**: 移除未使用的代码
- **压缩**: 使用Terser压缩JavaScript
- **CSS优化**: 自动移除未使用的CSS
### 开发体验优化
- **快速重建**: 使用nodemon智能监听
- **类型检查**: 实时TypeScript检查
- **代码规范**: ESLint + Prettier自动格式化
- **VS Code集成**: 完整的开发环境配置
## 🔧 配置说明
### Vite配置 (`vite.config.ts`)
- React插件配置
- 路径别名设置 (`@/` → `src/`)
- 构建优化选项
- 外部依赖排除
### TypeScript配置 (`tsconfig.json`)
- 现代ES2020目标
- 严格类型检查
- React JSX支持
- 路径映射
### ESLint配置 (`.eslintrc`)
- TypeScript规则
- React Hooks规则
- 现代JavaScript规则
- 自动修复配置
## 🚨 常见问题
### 样式不生效
确保TailwindCSS类名正确，并检查是否在`@layer utilities`中定义了自定义类。
### 构建文件过大
检查是否正确配置了外部依赖排除，避免将Obsidian API打包进插件。
### 热重载问题
使用`npm run dev:watch`而不是直接的Vite watch，避免无限重建问题。
## 📄 许可证
MIT License
## 🤝 贡献
欢迎提交Issue和Pull Request！
---
**注意**: 这是一个示例插件，仅用于展示如何在Obsidian插件中使用现代前端技术栈。在生产环境中使用前请进行充分测试。
## API Documentation
See https://github.com/obsidianmd/obsidian-api