Skip to content

Conversation

@JammingBen
Copy link
Contributor

@reference 'tailwindcss' will only reference the default tailwind styles, not the custom ones we have in tailwind.css. Instead, the css file should be referenced. However, since this is really cumbersome to do in every component, this adds a custom vite plugin that replaces @reference 'tailwindcss' with the correct path.

Also see tailwindlabs/tailwindcss#16429

@JammingBen JammingBen self-assigned this Aug 18, 2025
Copilot AI review requested due to automatic review settings August 18, 2025 08:04
@JammingBen JammingBen requested a review from kulmann August 18, 2025 08:04
@JammingBen JammingBen force-pushed the fix/tailwind-reference branch from 079d0ef to ab5fcfd Compare August 18, 2025 08:05
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes Tailwind CSS reference issues by creating a custom Vite plugin that automatically injects proper CSS references into Vue components. The change addresses the limitation where @reference 'tailwindcss' only references default Tailwind styles, not custom styles defined in the project's tailwind.css file.

  • Renamed existing plugin for clarity and added new plugin to handle CSS references
  • Created automatic injection of both default Tailwind and custom CSS file references into Vue components
  • Added enforcement ordering to ensure the plugin runs before other transformations

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@JammingBen JammingBen force-pushed the fix/tailwind-reference branch from ab5fcfd to 3e06f1e Compare August 18, 2025 08:16
`@reference 'tailwindcss'` will only reference the default tailwind styles, not the custom ones we have in `tailwind.css`. Instead, the css file should be referenced. However, since this is really cumbersome to do in every component, this adds a custom vite plugin that replaces `@reference 'tailwindcss'` with the correct path.
@JammingBen JammingBen force-pushed the fix/tailwind-reference branch from 3e06f1e to e03ecce Compare August 18, 2025 08:33
Copy link
Contributor

@kulmann kulmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅

@kulmann kulmann merged commit 4b9a72e into main Aug 18, 2025
29 checks passed
@kulmann kulmann deleted the fix/tailwind-reference branch August 18, 2025 09:32
@openclouders openclouders mentioned this pull request Aug 18, 2025
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants