{"enrichment":{"faq":[{"a":"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.","q":"How do I set up a new Vite+React+TailwindCSS development environment?"},{"a":"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.","q":"What is the best way to configure TypeScript and TailwindCSS for a React project?"},{"a":"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.","q":"Can I integrate lucide-react icons into a Vite+React+TailwindCSS stack?"},{"a":"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.","q":"How do I build responsive UI components using TailwindCSS v4 with React?"},{"a":"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.","q":"What are the best practices for TailwindCSS v4 in Vite projects?"},{"a":"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.","q":"What does the vite react tailwind setup process involve?"}],"shadow_tags":["build-tool-integration","css-framework-setup","component-library","icon-system","type-safety","responsive-design","dev-environment","styling-workflow"],"summary_rewrite":"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."},"files":[{"bytes":12556,"path":"skills/byted-util-vite-react-tailwind/SKILL.md","sha256":"3c127d805d04d816cd30f06498190e71a30f39714b18b12c0f8e12b2b1d7c487","url":"https://skillfed.io/files/bytedance/agentkit-samples/byted-util-vite-react-tailwind/558b55b2/SKILL.md"}],"id":"bytedance/agentkit-samples/byted-util-vite-react-tailwind","links":{"html":"https://skillfed.io/bytedance/agentkit-samples/byted-util-vite-react-tailwind","md":"https://skillfed.io/bytedance/agentkit-samples/byted-util-vite-react-tailwind.md","repo":"https://github.com/bytedance/agentkit-samples"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":84,"language":"Python","last_updated":"2026-07-27","license":"Apache-2.0","name":"byted-util-vite-react-tailwind","publisher":"bytedance","stars":378},"relations":{"similar":[{"id":"nicepkg/auto-company/tailwind-v4-shadcn"},{"id":"jezweb/claude-skills/tailwind-theme-builder"},{"id":"secondsky/claude-skills/tailwind-v4-shadcn"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration"},{"id":"EnderPuentes/ai-agent-skills/tailwind-css"},{"id":"binjuhor/shadcn-lar/ui-styling"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"mrgoonie/claudekit-skills/ui-styling"},{"id":"EnderPuentes/ai-agent-skills/shadcn-ui"},{"id":"IgorWarzocha/Opencode-Workflows/vite-shadcn-tailwind4"}]},"slug":{"owner":"bytedance","repo":"agentkit-samples","skill":"byted-util-vite-react-tailwind"},"version":"558b55b2"}