Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Improve existing project Tailwind CSS schematic integration #31046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
clydin merged 3 commits into angular:main from clydin:ng-schematics/tailwind-existing-styles
Aug 28, 2025

Conversation

Copy link
Member

@clydin clydin commented Aug 26, 2025

The tailwind schematic's stylesheet injection logic has been updated to support a wider range of project configurations. Previously, it assumed a styles.css file was always present, which could cause issues in projects using CSS preprocessors like Sass/SCSS.
Instead of unconditionally creating a new .postcssrc.json file, the schematic now searches for postcss.config.json or .postcssrc.json in both the workspace and project roots. If an existing configuration file is found, it is updated with the required @tailwindcss/postcss plugin. A new configuration file is only created if one does not already exist.

@clydin clydin added the target: major This PR is targeted for the next major release label Aug 26, 2025
@clydin clydin force-pushed the ng-schematics/tailwind-existing-styles branch 3 times, most recently from 21aff83 to c46e88c Compare August 26, 2025 20:39
@clydin clydin added the action: review The PR is still awaiting reviews from at least one requested reviewer label Aug 26, 2025
clydin added 3 commits August 27, 2025 08:28
...ilwind schematic
The tailwind schematic's stylesheet injection logic has been updated to support a wider range of project configurations. Previously, it assumed a `styles.css` file was always present, which could cause issues in projects using CSS preprocessors like Sass/SCSS.
This change introduces the following logic:
- Detects if a global CSS file already exists to add the Tailwind import.
- Creates a new `tailwind.css` file if no global CSS file is found.
- Updates the build configuration in `angular.json` to include the new `tailwind.css` file.
- Updates the `styles` array in all build configurations (`production`, `development`, etc.) to ensure Tailwind is included in all builds.
- Ensures the schematic is idempotent by checking for existing Tailwind imports before adding a new one.
These changes make the schematic more robust and provide a better user experience for a wider variety of project setups.
... tailwind schematic
The Tailwind schematic now intelligently handles existing PostCSS configurations.
Instead of unconditionally creating a new `.postcssrc.json` file, the schematic now searches for `postcss.config.json` or `.postcssrc.json` in both the workspace and project roots. If an existing configuration file is found, it is updated with the required `@tailwindcss/postcss` plugin. A new configuration file is only created if one does not already exist.
This prevents conflicts and makes the schematic safer to use in projects that already have a customized PostCSS setup.
The tests for the Tailwind schematic have been refactored to improve readability and reduce boilerplate code.
Helper functions (`createTestApp`, `getWorkspace`) have been introduced to handle the repetitive setup of the test application and the parsing of the workspace configuration. The existing tests were updated to use these new helpers, making them more concise and easier to maintain.
@clydin clydin force-pushed the ng-schematics/tailwind-existing-styles branch from c46e88c to 3d7e9cb Compare August 27, 2025 12:28
@alan-agius4 alan-agius4 added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Aug 28, 2025
@clydin clydin merged commit f5e6894 into angular:main Aug 28, 2025
32 checks passed
@clydin clydin deleted the ng-schematics/tailwind-existing-styles branch August 28, 2025 09:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alan-agius4 alan-agius4 alan-agius4 approved these changes

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker area: @schematics/angular target: major This PR is targeted for the next major release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /