byted-util-vite-react-tailwind
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
Byted-util-vite-react-tailwind sets up a complete Vite+React+TailwindCSS v4 development environment with TypeScript and lucide-react.
AI-generated summary based on this skill's SKILL.md
Install
bytedance/agentkit-samples/byted-util-vite-react-tailwind · repository language: Python
git clone https://github.com/bytedance/agentkit-samples
cp -r agentkit-samples/skills/byted-util-vite-react-tailwind ~/.claude/skills/byted-util-vite-react-tailwindnpx skillfed install bytedance/agentkit-samples/byted-util-vite-react-tailwindFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up a new Vite+React+TailwindCSS development environment?
byted-util-vite-react-tailwind guides you through creating a modern frontend project from scratch. Start by running `npm create vite@latest my-app -- --template react`, then install TailwindCSS v4 with `npm install -D tailwindcss postcss autoprefixer`. Configure your `tailwind.config.js` and `postcss.config.js` files, import Tailwind's directives into your CSS, and verify the setup by applying utility classes to your React components. The skill covers the complete initialization workflow and common configuration pitfalls.
What is the best way to configure TypeScript and TailwindCSS for a React project?
byted-util-vite-react-tailwind explains TypeScript setup alongside TailwindCSS v4 configuration. Ensure your `tsconfig.json` includes proper path aliases and strict mode settings, then configure TailwindCSS to scan your TypeScript and JSX files in the `content` array. Use type-safe component patterns with React and leverage TypeScript's intellisense for Tailwind utilities. The skill highlights configuration mistakes to avoid and best practices for maintaining type safety across your styling workflow.
Can I integrate lucide-react icons into a Vite+React+TailwindCSS stack?
byted-util-vite-react-tailwind covers lucide-react icon integration as part of your component development workflow. Install lucide-react with `npm install lucide-react`, then import icons directly into your React components and style them with TailwindCSS utilities. Icons inherit color and size from Tailwind classes, making them seamless to use alongside your responsive UI components. The skill demonstrates practical patterns for icon usage in modern Vite projects.
How do I build responsive UI components using TailwindCSS v4 with React?
byted-util-vite-react-tailwind teaches component development using TailwindCSS v4's responsive breakpoints and utility-first approach. Create reusable React components and apply Tailwind's responsive prefixes (sm:, md:, lg:) to build layouts that adapt across devices. The skill covers component patterns, composition strategies, and styling workflows that leverage Vite's fast refresh for efficient development. Learn how to structure components for maintainability and reusability.
What are the best practices for TailwindCSS v4 in Vite projects?
byted-util-vite-react-tailwind outlines development conventions for modern Vite+React+TailwindCSS workflows. Use Vite's module resolution for cleaner imports, organize components logically, leverage TailwindCSS v4's improved performance, and follow utility-first principles to avoid style bloat. The skill emphasizes project structure, configuration optimization, and patterns that scale well as your frontend grows. Proper setup ensures fast builds and maintainable code.
What does the vite react tailwind setup process involve?
byted-util-vite-react-tailwind walks through the complete setup from project creation to first styled component. Initialize a Vite project with React template, install TailwindCSS v4 and dependencies, configure PostCSS and Tailwind config files, set up TypeScript if needed, and verify everything works by building a test component. The skill provides step-by-step guidance, explains each configuration file's purpose, and helps you avoid common mistakes during initial setup.
SKILL.md
rendered from the published skill — quoted content, verbatim
Vite + React + TailwindCSS v4 开发技能
> 基于 Vite + React + TailwindCSS v4 + lucide-react 技术栈的前端项目搭建和开发指南。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Vite | ^5.x 或 ^6.x | 构建工具、开发服务器 |
| React | ^18.x 或 ^19.x | UI 框架 |
| TailwindCSS | ^4.x | 原子化 CSS 框架（Vite 插件模式） |
| @tailwindcss/vite | ^4.x | TailwindCSS Vite 插件 |
| lucide-react | latest | 图标库 |
| TypeScript | ^5.x 或 ^6.x | 类型安全 |
项目初始化
Step 1: 创建 Vite + React 项目
# 创建项目（使用 React + TypeScript 模板）
npm create vite@latest . -- --template react-ts
# 安装依赖
npm install
Step 2: 安装 TailwindCSS v4
# 安装 TailwindCSS v4 及 Vite 插件
npm install tailwindcss @tailwindcss/vite
> 注意： v4 不再需要 postcss、autoprefixer，也不需要运行 npx tailwindcss init。
Step 3: 配置 Vite 插件
在 vite.config.ts 中添加 @tailwindcss/vite 插件：
vite.config.ts: ```ts import { defineConfig } from
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/byted-util-vite-react-tailwind/LICENSE
skills/byted-util-vite-react-tailwind/SKILL.md
skills/byted-util-vite-react-tailwind/_meta.json