# react-case-template

**Repository Path**: mdsSJY/react-case-template

## Basic Information

- **Project Name**: react-case-template
- **Description**: 我的react案例工程，与模版。
效果演示
https://reactdemoshow.sjy.asia
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: temp
- **Homepage**: https://reactdemoshow.sjy.asia
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Tailwind

## README

# my react Template

甲方的 低代码平台 nocode中生成web应用使用的react + vite + tailwindcss + js 的模板。也是第一次使用react + tailwind。学习一下，并创建一个自己的模板。

# 效果演示

https://reactdemoshow.sjy.asia

## 技术栈

我这里做了一些升级。 js 升级 ts，tailwind v3 升级 v4。并配置了一些人工介入开发的方便一些工具工作流。

- react
- vite
- tailwindcss v4
- ts
- radix-ui

  > 文档 https://www.radix-ui.com/primitives/docs/components/select

- lucide icons

  > 文档 https://lucide.dev/guide/advanced/filled-icons

- tanstack table v8
  v8
  > 文档 URL_ADDRESS > 文档 https://tanstack.com/table/v8/docs/introduction

### Tailwind CSS IntelliSense 插件

文档

> https://tailwindcss.com/docs/installation/using-vite

tailwind v4 全新特性文档

> https://tailwindcss.com/blog/tailwindcss-v4

tailwind v4 主题切换

> https://stackoverflow.com/questions/79487101/tailwindcss-v4-dark-theme-by-class-not-working-without-dark-tag

速查

> https://rtool.cn/reference/tailwindcss.html

### prettier 的 tailwind plugin

> https://github.com/tailwindlabs/prettier-plugin-tailwindcss

### 工作流

1. prettier插件

- 配置.prettierrc.json 按需

2. tailwindcss

```bash
https://tailwindcss.com/docs/installation/using-vite
# v3版本带有postcss，autoprefixer的tailwindcss
npm install -D tailwindcss postcss autoprefixer
# v4版本自带postcss，autoprefixer
npm install -D tailwindcss @tailwindcss/vite
# 然后配置vite.config.ts
# 生成简化配置 似乎v3才有效
npx tailwindcss init
# 生成完整配置 似乎v3才有效
npx tailwindcss init -p

# v4 的配置
https://juejin.cn/post/7484168794950811648
```

3. tailwindcss 的 prettier plugin

- 该插件支持tailwind的语法检查和排序format，提升开发体验

```bash
npm install -D prettier prettier-plugin-tailwindcss
# 然后配置.prettierrc.json
```

4. eslint插件

```bash
# 初始化eslint并创建一个默认的配置
npx eslint --init
```

5. Tailwind CSS IntelliSense 插件 tailwindcss自动补全

   > https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

6. browser-tools MCP

```bash
# 启动本地服务端
npx @agentdeskai/browser-tools-server@latest
```

7. react-devtools

> 文档
> https://react.dev/learn/react-developer-tools

```bash
# 启动
npx react-devtools

```

### todo

- [] 案例工程
- [] 自定义模板