fix: inject Tailwind CSS into client entry point #1537

elibosley · 2025-07-23T12:41:17Z

Added a Vite plugin to automatically inject the Tailwind CSS import into the unraid-components.client.js entry file, enhancing the integration of Tailwind CSS within the application. This change improves the setup for styling components consistently across the project.

Summary by CodeRabbit

New Features
- Added automated validation to ensure Tailwind CSS styles are correctly included in the custom elements build output.
Chores
- Updated the build process to include a CSS validation step after manifest generation.
- Enhanced development build configuration to enable CSS source maps and optimize Tailwind CSS injection into web components.
- Extended CSS theme with new responsive breakpoint variables.
- Improved CSS class specificity in user profile, server state, and update modal components for consistent styling.
- Removed redundant style blocks and global CSS imports from multiple components to streamline styling and reduce duplication.

Added a Vite plugin to automatically inject the Tailwind CSS import into the `unraid-components.client.js` entry file, enhancing the integration of Tailwind CSS within the application. This change improves the setup for styling components consistently across the project.

coderabbitai · 2025-07-23T12:41:24Z

Walkthrough

This change introduces a helper function to simplify web component tag configuration in the Nuxt Vite setup and modifies the Vite config to enable CSS source maps during development. It adds a new build script to validate that Tailwind CSS is properly inlined in the custom elements bundle. Multiple Vue components have their style blocks removed to eliminate redundant global CSS imports and animations. New CSS breakpoint variables were added, and some Tailwind utility classes were updated with important modifiers. Permissions in a local settings file were adjusted accordingly.

Changes

File(s)	Change Summary
web/nuxt.config.ts	Added `createWebComponentTag` helper; updated Vite config to apply shared config, enable CSS dev sourcemaps, and simplify tag list creation.
web/package.json	Added `validate:css` script; updated `build` script to run CSS validation after manifest generation.
web/scripts/validate-custom-elements-css.js	Added new Node.js script that validates presence of Tailwind CSS indicators and bundle size in custom elements JS output.
web/assets/main.css	Added three new CSS custom properties for breakpoints: `--breakpoint-xs`, `--breakpoint-2xl`, `--breakpoint-3xl`.
web/components/UserProfile.ce.vue, UserProfile/ServerState.vue, UpdateOs/ChangelogModal.vue, UpdateOs/CheckUpdateResponseModal.vue	Added `!` important modifiers to Tailwind display utility classes to increase specificity.
web/components/UserProfile.ce.vue	Removed entire style block with global CSS imports and animations.
web/components/UserProfile/ServerState.vue	Changed `sm:block` class to `sm:!block` to enforce display style.
web/components/ApiKeyPage.ce.vue, Auth.ce.vue, CallbackHandler.ce.vue, ColorSwitcher.ce.vue, ConnectSettings/ConnectSettings.ce.vue, DevSettings.vue, DowngradeOs.ce.vue, DownloadApiLogs.ce.vue, DummyServerSwitcher.vue, HeaderOsVersion.ce.vue, Logs/LogViewer.ce.vue, Modals.ce.vue, RClone/RCloneConfig.vue, Registration.ce.vue, SsoButton.ce.vue, ThemeSwitcher.ce.vue, UpdateOs.ce.vue, UpdateOs/Downgrade.vue, UpdateOs/Update.vue, UpdateOs/UpdateIneligible.vue, UserProfile/CallbackFeedback.vue, UserProfile/DropdownLaunchpad.vue, WanIpCheck.ce.vue, pages/index.vue	Removed entire `<style>` blocks importing global and local CSS and, where present, CSS animations and keyframes.
web/components/Wrapper/web-component-plugins.ts	Added global Vue mixin to inject Tailwind CSS styles into shadow DOM of web components.
.claude/settings.local.json	Removed `"Bash(rm:*)"` permission; added permissions for web fetch and new bash commands related to CSS validation.
plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php	Added a blank line after `getManifestContents` method; no functional changes.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant BuildSystem
    participant Nuxt
    participant Vite
    participant ValidatorScript

    Developer->>BuildSystem: Run build script
    BuildSystem->>Nuxt: nuxi build (with .env.production)
    Nuxt->>Vite: Apply shared config + inject-tailwind-css plugin
    Vite->>Vite: Inject Tailwind CSS import into client entry
    BuildSystem->>BuildSystem: Run manifest-ts
    BuildSystem->>ValidatorScript: Run validate-custom-elements-css.js
    ValidatorScript->>ValidatorScript: Scan output CSS, check for Tailwind indicators
    ValidatorScript->>BuildSystem: Report validation result

Estimated code review effort

2 (~15 minutes)

Possibly related PRs

fix: add missing breakpoints #1535: Adds the same three breakpoint CSS custom properties but in a different CSS file, related to breakpoint definitions.
feat: upgrade nuxt-custom-elements #1461: Updates web/nuxt.config.ts for custom elements build setup, focusing on package upgrades and jQuery isolation plugin.
feat(ui): webgui-compatible web component library #1075: Introduces CI build steps for Unraid UI web components, related to Vite config changes for web components build.

Suggested reviewers

zackspear
pujitm
mdatelle

Poem

Tailwind flows through custom code,
With scripts to validate the load.
A plugin tweaks the Vite config right,
Ensuring styles are bold and bright.
Build and check, then all is well—
CSS is present, as tests will tell!
🌈💻

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b72714e and 3abf93c.

📒 Files selected for processing (4)

.claude/settings.local.json (1 hunks)
web/components/UpdateOs/ChangelogModal.vue (2 hunks)
web/components/UpdateOs/CheckUpdateResponseModal.vue (4 hunks)
web/components/UserProfile.ce.vue (3 hunks)

✅ Files skipped from review due to trivial changes (1)

web/components/UpdateOs/ChangelogModal.vue

🚧 Files skipped from review as they are similar to previous changes (3)

web/components/UserProfile.ce.vue
web/components/UpdateOs/CheckUpdateResponseModal.vue
.claude/settings.local.json

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Build API
GitHub Check: Build Web App
GitHub Check: Test API
GitHub Check: Analyze (javascript-typescript)

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Introduced a new script to validate that Tailwind CSS styles are properly included in the custom elements build. This script checks for required Tailwind indicators in the generated CSS files and reports validation results, enhancing the reliability of the styling integration. Additionally, updated the build process to include a new `validate:css` command.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

web/scripts/validate-custom-elements-css.js (1)

44-48: Consider making CSS file selection more robust.

While selecting the largest CSS file works for the current use case, this assumption could become fragile if the build output structure changes.

Consider adding a fallback strategy or more explicit file naming patterns:

-    // Find the largest CSS file (likely the main one with Tailwind)
-    const cssFile = cssFiles.reduce((largest, current) => {
-      const currentSize = fs.statSync(current).size;
-      const largestSize = fs.statSync(largest).size;
-      return currentSize > largestSize ? current : largest;
-    });
+    // Find the largest CSS file (likely the main one with Tailwind)
+    // Prefer files with 'main' or 'index' in the name, otherwise use largest
+    const cssFile = cssFiles.reduce((best, current) => {
+      const currentName = path.basename(current, '.css').toLowerCase();
+      const bestName = path.basename(best, '.css').toLowerCase();
+      
+      if (currentName.includes('main') || currentName.includes('index')) {
+        return current;
+      }
+      if (bestName.includes('main') || bestName.includes('index')) {
+        return best;
+      }
+      
+      const currentSize = fs.statSync(current).size;
+      const largestSize = fs.statSync(best).size;
+      return currentSize > largestSize ? current : best;
+    });

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b6acf50 and eb21759.

📒 Files selected for processing (3)

web/nuxt.config.ts (1 hunks)
web/package.json (1 hunks)
web/scripts/validate-custom-elements-css.js (1 hunks)

📓 Path-based instructions (1)

web/**/*.ts

📄 CodeRabbit Inference Engine (CLAUDE.md)

Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Files:

web/nuxt.config.ts

🧠 Learnings (4)

📓 Common learnings

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Ensure Vue reactivity imports are added to original store files as they may be missing because Nuxt auto import was turned on

Learnt from: mdatelle
PR: unraid/api#1122
File: web/package.json:16-16
Timestamp: 2025-02-06T17:25:45.397Z
Learning: The build script in web/package.json should include type-check command (`npm run type-check`) even when NODE_ENV is production, as it provides value for local builds by catching type errors before pushing to CI/CD.

Learnt from: pujitm
PR: unraid/api#975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like `TabsList` and `TabsTrigger` used in `web/components/Notifications/TabList.vue` are automatically available without imports.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/api-rules.mdc:0-0
Timestamp: 2025-07-21T14:00:06.258Z
Learning: Applies to api/**/*.{test,spec}.{js,ts,tsx} : Use Vitest as the test suite; do not use Jest

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Applies to web/**/*.ts : Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Learnt from: elibosley
PR: unraid/api#972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.

Learnt from: mdatelle
PR: unraid/api#1106
File: web/components/UserProfile.ce.vue:168-170
Timestamp: 2025-02-07T19:25:02.936Z
Learning: Files with .ce.vue extension are web components that require self-contained styles. Global style imports within these components are valid and necessary for proper encapsulation.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/__test__/{components,store,mocks}/**/*.ts : Avoid relying on Nuxt's auto-imports in test environment

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Test suite is VITEST, do not use jest in the API codebase

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/__test__/{components,store,mocks}/**/*.ts : Don't rely on Nuxt auto-imports in tests

web/package.json (11)

Learnt from: mdatelle
PR: #1122
File: web/package.json:16-16
Timestamp: 2025-02-06T17:25:45.397Z
Learning: The build script in web/package.json should include type-check command (npm run type-check) even when NODE_ENV is production, as it provides value for local builds by catching type errors before pushing to CI/CD.

Learnt from: elibosley
PR: #1120
File: plugin/package.json:0-0
Timestamp: 2025-02-05T14:43:48.568Z
Learning: In Node.js projects, npm scripts should be organized with clear namespacing (e.g., build:, docker:, env:*) and include proper environment validation and error handling. Each script should follow the single responsibility principle.

Learnt from: zackspear
PR: #1079
File: web/scripts/deploy-dev.sh:51-54
Timestamp: 2025-01-29T00:59:26.633Z
Learning: For the Unraid web components deployment process, JS file validation isn't required in auth-request.php updates since the files come from the controlled build pipeline where we are the source.

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Always run scripts from api/package.json unless requested

Learnt from: elibosley
PR: #1105
File: api/scripts/build.mjs:0-0
Timestamp: 2025-02-04T16:42:21.782Z
Learning: In Node.js build scripts, avoid manually copying node_modules as a cache layer. Instead, rely on npm's built-in caching mechanism and use direct npm install commands, as this ensures dependency consistency and proper version resolution while still maintaining good performance through npm's cache.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/api-rules.mdc:0-0
Timestamp: 2025-07-21T14:00:06.258Z
Learning: Applies to api/**/* : Always run scripts from api/package.json unless specifically requested otherwise

Learnt from: elibosley
PR: #1120
File: plugin/scripts/build-plugin-and-txz.ts:177-200
Timestamp: 2025-02-05T14:43:04.715Z
Learning: In the plugin build system (plugin/scripts/build-plugin-and-txz.ts), updating all XML entities in a single loop is an acceptable pattern when all values need to be replaced, as it ensures consistency and maintainability. The PR entity is optional and handled separately in the validation.

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Always run pnpm codegen for GraphQL code generation in the web directory

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-graphql.mdc:0-0
Timestamp: 2025-07-21T14:00:25.140Z
Learning: Always run pnpm codegen for GraphQL code generation in the web directory

Learnt from: elibosley
PR: #1120
File: plugin/Dockerfile:1-3
Timestamp: 2025-02-05T14:25:37.316Z
Learning: The Dockerfile in the plugin directory is specifically for building artifacts during CI and is not used for production deployments. It creates a build environment with Node.js and necessary dependencies to generate plugin files.

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Applies to web/test/**/* : Tests are located under web/test, run with pnpm test

web/nuxt.config.ts (11)

Learnt from: pujitm
PR: #1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in web/components get built as custom elements and prefixed with unraid-, making them available as HTML custom elements at runtime.

Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T13:59:55.481Z
Learning: Applies to web/**/*.ts : Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Avoid relying on Nuxt's auto-imports in test environment

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/{components,store,mocks}/**/*.ts : Don't rely on Nuxt auto-imports in tests

Learnt from: elibosley
PR: #1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. The setActivePinia(createPinia()) call at the module level in store files is intentional and ensures all web components share a single Pinia store instance, which is the desired behavior. This shared state approach is critical for the application's architecture to function correctly.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to maintain proper isolation and encapsulation.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/components/**/*.ts : Use mount from Vue Test Utils for component testing

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to function correctly.

Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using setActivePinia(createPinia()) in store files ensures that all web components share a single Pinia store instance, which is the desired behavior. Without this initialization, each web component would have its own isolated store, breaking the intended architecture.

web/scripts/validate-custom-elements-css.js (13)

Learnt from: mdatelle
PR: #1122
File: web/package.json:16-16
Timestamp: 2025-02-06T17:25:45.397Z
Learning: The build script in web/package.json should include type-check command (npm run type-check) even when NODE_ENV is production, as it provides value for local builds by catching type errors before pushing to CI/CD.

Learnt from: zackspear
PR: #1079
File: web/scripts/deploy-dev.sh:51-54
Timestamp: 2025-01-29T00:59:26.633Z
Learning: For the Unraid web components deployment process, JS file validation isn't required in auth-request.php updates since the files come from the controlled build pipeline where we are the source.

Learnt from: elibosley
PR: #1120
File: plugin/package.json:0-0
Timestamp: 2025-02-05T14:43:48.568Z
Learning: In Node.js projects, npm scripts should be organized with clear namespacing (e.g., build:, docker:, env:*) and include proper environment validation and error handling. Each script should follow the single responsibility principle.

Learnt from: elibosley
PR: #1181
File: web/store/theme.ts:210-216
Timestamp: 2025-02-21T18:40:10.810Z
Learning: When updating theme-related CSS variables via cssText, preserve existing non-theme styles by filtering out only theme-related rules (those starting with '--') and combining them with the new theme styles.

Learnt from: pujitm
PR: #1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in web/components get built as custom elements and prefixed with unraid-, making them available as HTML custom elements at runtime.

Learnt from: mdatelle
PR: #1106
File: web/components/UserProfile.ce.vue:168-170
Timestamp: 2025-02-07T19:25:02.936Z
Learning: Files with .ce.vue extension are web components that require self-contained styles. Global style imports within these components are valid and necessary for proper encapsulation.

Learnt from: pujitm
PR: #975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like TabsList and TabsTrigger used in web/components/Notifications/TabList.vue are automatically available without imports.

Learnt from: elibosley
PR: #1120
File: plugin/scripts/build-plugin-and-txz.ts:132-147
Timestamp: 2025-02-06T15:32:09.488Z
Learning: For validation steps in build scripts where the goal is to fail fast on invalid state, simple error handling (console.error + process.exit) is appropriate since we want to abort the build process immediately.

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/components/**/*.ts : Use findAll to check for multiple elements

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/components/**/*.ts : Verify element existence with expect(element.exists()).toBe(true)

Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-07-21T14:01:04.139Z
Learning: Applies to web/test/components/**/*.ts : Verify that the expected elements are rendered in component tests