Module Federation: Build the Tailwind stylesheet once in core

.claude/rules/module-federation/remotes.md

@@ -63,6 +63,20 @@ export const YourRoutes = React.lazy(() => import('your_component/routes').then(
 The `*_component/routes`, `*_component/sidebar`, and `*_component/provide` module shapes are typed
 once in `clients/core/src/declaration.d.ts`.
 
+## Styling
+
+`clients/core` builds the only Tailwind stylesheet in the document. Its `content` globs cover
+`clients/*_component/{src,routes,sidebar}` plus the shared UI library, so a remote's utilities are
+emitted by core and a remote ships none of its own.
+
+A remote must not declare a Tailwind entry point of its own: no `tailwind.config.*`, and no
+`@tailwind`, `@config`, `@source`, `@apply`, or `tailwindcss` import in its CSS. `scripts/check-remote-styles.sh`
+enforces this in CI. Plain CSS is still fine (`assessment_component/src/print.css`).
+
+Two Tailwind builds in one document cannot both be right: the sheets carry the same globally named
+utilities, so the later-injected `.px-3` beats the earlier `.pl-9` on a shared component that the
+host overrode, and reversing the order just moves the breakage to the remote (issue #2086).
+
 ## Rules
 
 - `react`, `react-dom`, `react-router-dom`, `@tanstack/react-query`, and

.claude/rules/react-typescript/shadcn.md

@@ -21,4 +21,7 @@ owned per component, and this repository holds no primitives of its own.
   `DatePicker`, `DeleteConfirmation`). See `shared-libraries.md`. Reuse before installing/building.
 - **Styling:** compose classes with `cn` (clsx + tailwind-merge); use Tailwind v4 tokens, not
   hard-coded colors. Keep Radix accessibility props intact; don't strip `aria-*`/`role`.
+- **One Tailwind build.** `clients/core` compiles the only stylesheet and scans every component
+  directory; a `*_component` never declares a Tailwind entry point. See the styling section of
+  `../module-federation/remotes.md`.
 - For the full workflow use the `add-shared-ui-component` skill.

.github/workflows/quality-clients.yml

@@ -7,6 +7,13 @@ permissions:
   contents: read
 
 jobs:
+  single-tailwind-sheet:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - name: Check that only core builds Tailwind
+        run: ./scripts/check-remote-styles.sh
+
   quality-client:
     runs-on: ubuntu-latest
     defaults:

clients/assessment_component/routes/index.tsx

@@ -1,4 +1,4 @@
-import '../src/loadStyles'
+import '../src/print.css'
 
 import {
   EDITOR_ROLES,

clients/assessment_component/sidebar/index.tsx

@@ -1,5 +1,3 @@
-import '../src/loadStyles'
-
 import {
   EDITOR_ROLES,
   LECTURER_ROLES,

clients/assessment_component/src/index.js

@@ -1,5 +1,3 @@
-import './loadStyles'
-
 import('./bootstrap')
 
 export { StudentDetail } from './provide/student_detail'

clients/assessment_component/src/styles.css → clients/assessment_component/src/print.css

@@ -1,7 +1,3 @@
-@import 'tailwindcss';
-@config '../tailwind.config.js';
-@import '../../tailwind-base.css';
-
 @media print {
   @page {
     margin: 1.5cm;

clients/assessment_component/src/provide/index.ts

@@ -1,3 +1 @@
-import '../loadStyles'
-
 export { StudentDetail } from './student_detail'

clients/assessment_component/tsconfig.json

@@ -22,5 +22,5 @@
       "@hookform/resolvers/*": ["../node_modules/@hookform/resolvers/*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/certificate_component/src/index.js

@@ -1,3 +1 @@
-import './styles.css'
-
 import('./bootstrap')

clients/certificate_component/tsconfig.json

@@ -19,5 +19,5 @@
       "react-hook-form": ["../node_modules/react-hook-form"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/core/src/managementConsole/layout/Sidebar/CourseSwitchSidebar/components/SidebarHeader.tsx

@@ -23,6 +23,7 @@ const SidebarHeaderComponent = () => {
           <SidebarMenuButton
             size='lg'
             asChild
+            data-testid='sidebar-home'
             className='min-w-12 min-h-12 p-0'
             tooltip={{
               children: 'Home',
@@ -43,7 +44,7 @@ const SidebarHeaderComponent = () => {
             >
               <div
                 className={`
-                  flex aspect-square items-center justify-center rounded-lg bg-sidebar-secondary text-sidebar-primary-foreground 
+                  flex aspect-square items-center justify-center rounded-lg bg-sidebar-secondary text-sidebar-primary-foreground
                   ${isActive ? 'size-12' : 'size-10'}
                   `}
               >

clients/core/src/managementConsole/shared/components/CourseCard/CourseCards.tsx

@@ -24,14 +24,13 @@ export const CourseCards = ({ courses }: CourseCardsProps) => {
     <div className='flex flex-col gap-6'>
       <div className='relative max-w-md'>
         <Search className='pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground' />
-        {/* Remotes ship their own Tailwind build, so an unprefixed pl-9 loses to their .px-3 */}
         <Input
           type='search'
           aria-label='Search courses'
           placeholder='Search courses...'
           value={search}
           onChange={(event) => setSearch(event.target.value)}
-          className='pl-9!'
+          className='pl-9'
         />
       </div>
 

clients/core/tailwind.config.js

@@ -71,8 +71,13 @@ export default {
     },
   },
   plugins: [tailwindAnimate, typography],
+  // Core builds the only Tailwind stylesheet in the document, so it scans every
+  // micro-frontend as well: remotes ship no utilities of their own.
   content: [
     './src/**/*.{js,ts,jsx,tsx}',
+    '../*_component/src/**/*.{js,ts,jsx,tsx}',
+    '../*_component/routes/**/*.{js,ts,jsx,tsx}',
+    '../*_component/sidebar/**/*.{js,ts,jsx,tsx}',
     '../node_modules/@tumaet/prompt-ui-components/dist/**/*.{js,ts,jsx,tsx}',
   ],
 }

clients/example_component/src/index.js

@@ -1,3 +1 @@
-import './styles.css'
-
 import('./bootstrap')

clients/example_component/tsconfig.json

@@ -17,5 +17,5 @@
     "types": ["node"],
     "paths": {}
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/interview_component/src/index.js

@@ -1,5 +1,3 @@
-import './styles.css'
-
 import('./bootstrap')
 
 export { StudentDetail } from './provide/student_detail'

clients/interview_component/tsconfig.json

@@ -17,5 +17,5 @@
     "types": ["node"],
     "paths": {}
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/matching_component/src/index.js

@@ -1,5 +1,3 @@
-import './styles.css'
-
 import('./bootstrap')
 
 export { StudentDetail } from './provide/student_detail'

clients/matching_component/tsconfig.json

@@ -17,5 +17,5 @@
     "types": ["node"],
     "paths": {}
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/presentation_component/routes/index.tsx

@@ -1,5 +1,3 @@
-import '../src/styles.css'
-
 import { type ExtendedRouteObject, Role } from '@tumaet/prompt-shared-state'
 import { lazy, Suspense } from 'react'
 

clients/presentation_component/sidebar/index.tsx

@@ -1,5 +1,3 @@
-import '../src/styles.css'
-
 import { Role, type SidebarMenuItemProps } from '@tumaet/prompt-shared-state'
 import { Presentation } from 'lucide-react'
 

clients/presentation_component/src/bootstrap.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'
-import './styles.css'
 
 const rootElement = document.getElementById('presentation-root')
 if (rootElement) {

clients/presentation_component/tsconfig.json

@@ -19,5 +19,5 @@
       "react-hook-form": ["../node_modules/react-hook-form"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/self_team_allocation_component/src/index.js

@@ -1,5 +1,3 @@
-import './styles.css'
-
 import('./bootstrap')
 
 export { StudentDetail } from './provide/student_detail'

clients/self_team_allocation_component/tsconfig.json

@@ -17,5 +17,5 @@
     "types": ["node"],
     "paths": {}
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }

clients/shared/readme.md

@@ -10,5 +10,9 @@ and TypeScript setup.
 - `runtime/mountRemote.tsx` - React root mount for the standalone dev page.
 - `runtime/StandaloneNotice.tsx` - the notice that standalone page renders.
 
+Styling is not part of this scaffolding: `clients/core` builds the single Tailwind stylesheet for
+the whole shell and scans every component directory for it. Remotes ship no Tailwind build of their
+own. See the styling section of `.claude/rules/module-federation/remotes.md`.
+
 External phases live in their own repositories and cannot import from here; keep
 `template-repository/` in sync by hand.

clients/team_allocation_component/src/index.js

@@ -1,5 +1,3 @@
-import './styles.css'
-
 import('./bootstrap')
 
 export { StudentDetail } from './provide/student_detail'

clients/team_allocation_component/tsconfig.json

@@ -17,5 +17,5 @@
     "types": ["node"],
     "paths": {}
   },
-  "include": ["**/*.ts", "**/*.tsx", "src/index.js", "tailwind.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js"]
 }