feat(create-rsbuild): add Tailwind CSS support#6934
Conversation
✅ Deploy Preview for rsbuild ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds Tailwind CSS support to the create-rsbuild tool, allowing users to optionally include Tailwind CSS when creating new Rsbuild projects. The implementation includes templates, documentation updates, and comprehensive test coverage.
Key Changes:
- Added Tailwind CSS as an optional tool during project creation
- Updated documentation (English and Chinese) to reflect the new Tailwind CSS option
- Implemented automatic insertion of Tailwind CSS import into project CSS files
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
packages/create-rsbuild/src/index.ts |
Added Tailwind CSS tool configuration with action handler to copy template files and inject import statements |
packages/create-rsbuild/template-tailwindcss/postcss.config.mjs |
PostCSS configuration template for Tailwind CSS v4 |
packages/create-rsbuild/template-tailwindcss/package.json |
Package dependencies for Tailwind CSS integration |
e2e/cases/create-rsbuild/tools.test.ts |
Added comprehensive tests for vanilla and React projects with Tailwind CSS |
website/docs/en/guide/start/quick-start.mdx |
Updated English documentation to include Tailwind CSS in optional tools list |
website/docs/zh/guide/start/quick-start.mdx |
Updated Chinese documentation to include Tailwind CSS in optional tools list |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import.meta.dirname, | ||
| 'react', | ||
| { | ||
| name: 'test-temp-tailwindcss', |
There was a problem hiding this comment.
The test name 'test-temp-tailwindcss' is duplicated from line 41. To avoid potential conflicts if tests run in parallel or if cleanup fails, consider using a unique name such as 'test-temp-react-tailwindcss' to match the pattern used in other framework-specific tests (e.g., 'test-temp-react-eslint', 'test-temp-vue-eslint').
| name: 'test-temp-tailwindcss', | |
| name: 'test-temp-react-tailwindcss', |
| action: async ({ distFolder }) => { | ||
| const from = path.join(__dirname, '..', 'template-tailwindcss'); | ||
| copyFolder({ | ||
| from: from, |
There was a problem hiding this comment.
The variable assignment can be simplified using object property shorthand. Instead of 'from: from', you can just use 'from' in the object literal. Alternatively, the 'from' variable could be inlined directly in the copyFolder call to reduce redundancy.
| from: from, | |
| from, |
1 participant
Summary
create-rsbuildChecklist