From 09d6e95d3762e9ff20ab7af3803c0375c4f9aefc Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Wed, 26 Aug 2026 16:53:59 -0500
Subject: [PATCH] Document Groundwork CSS import order

---
 .../getting-started/adding-tailwind.jsx       | 21 ++++++++++++++++++-
 .../getting-started/client-side-routing.jsx   |  3 +--
 .../getting-started/quick-start-guide.jsx     | 21 ++++++++++++++++++-
 src/app-pages/documentation/index.jsx         | 10 +++++----
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/app-pages/documentation/getting-started/adding-tailwind.jsx b/src/app-pages/documentation/getting-started/adding-tailwind.jsx
index 8bf84a6e..2d1e622c 100644
--- a/src/app-pages/documentation/getting-started/adding-tailwind.jsx
+++ b/src/app-pages/documentation/getting-started/adding-tailwind.jsx
@@ -105,6 +105,26 @@ export default defineConfig({
           <Code className="!gw-font-bold">./src/index.css</Code>
           <CodeExample code={`@import "tailwindcss"`}></CodeExample>
 
+          <P>
+            Import the Groundwork stylesheet from your application entry point,
+            after <Code>index.css</Code>. This keeps Tailwind and Groundwork in
+            a predictable order.
+          </P>
+          <Code className="!gw-font-bold">./src/main.jsx</Code>
+          <CodeExample
+            code={`import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import "@usace/groundwork/groundwork.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);`}
+          ></CodeExample>
+
           <P></P>
           <Code className="!gw-font-bold">terminal</Code>
           <CodeExample code={`npm run dev`}></CodeExample>
@@ -113,7 +133,6 @@ export default defineConfig({
           <Code className="!gw-font-bold">./src/App.jsx</Code>
           <CodeExample
             code={`import { SiteWrapper, Container, UsaceBox } from "@usace/groundwork";
-import "@usace/groundwork/dist/groundwork.css";
 
 function App() {
   return (
diff --git a/src/app-pages/documentation/getting-started/client-side-routing.jsx b/src/app-pages/documentation/getting-started/client-side-routing.jsx
index 7b475cdc..fe582a9a 100644
--- a/src/app-pages/documentation/getting-started/client-side-routing.jsx
+++ b/src/app-pages/documentation/getting-started/client-side-routing.jsx
@@ -370,6 +370,7 @@ import getStore from "./app-bundles";
 import { ReduxBundlerProvider } from "redux-bundler-hook";
 import App from "./App.jsx";
 import "./index.css";
+import "@usace/groundwork/groundwork.css";
 
 const store = getStore();
 
@@ -400,7 +401,6 @@ ReactDOM.createRoot(document.getElementById("root")).render(
           <CodeExample
             code={`import { useConnect } from "redux-bundler-hook";
 import { SiteWrapper, Container } from "@usace/groundwork";
-import "@usace/groundwork/dist/groundwork.css";
 
 function App() {
 const { route: Route } = useConnect("selectRoute");
@@ -453,7 +453,6 @@ export default App;`}
             code={`import { useConnect } from "redux-bundler-hook";
 import { getNavHelper } from "internal-nav-helper";
 import { SiteWrapper, Container } from "@usace/groundwork";
-import "@usace/groundwork/dist/groundwork.css";
 
 function App() {
   const { route: Route, doUpdateUrl } = useConnect(
diff --git a/src/app-pages/documentation/getting-started/quick-start-guide.jsx b/src/app-pages/documentation/getting-started/quick-start-guide.jsx
index bf0d9965..ee581acc 100644
--- a/src/app-pages/documentation/getting-started/quick-start-guide.jsx
+++ b/src/app-pages/documentation/getting-started/quick-start-guide.jsx
@@ -151,6 +151,26 @@ npm run dev`}
             file, delete everything here, we don't want these styles colliding
             with what we're doing.
           </P>
+          <P>
+            Open <Code className="gw-text-nowrap">./src/main.jsx</Code> and
+            import the Groundwork stylesheet after your application stylesheet.
+            Keeping both imports in the entry point makes their order explicit
+            and ensures Groundwork component styles are applied last.
+          </P>
+          <Code className="!gw-font-bold">./src/main.jsx</Code>
+          <CodeExample
+            code={`import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import "@usace/groundwork/groundwork.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);`}
+          />
           <P>
             Open the <Code className="gw-text-nowrap">./src/App.jsx</Code> file.
             We're going to replace the contents with the code block below:
@@ -158,7 +178,6 @@ npm run dev`}
           <Code className="!gw-font-bold">./src/App.jsx</Code>
           <CodeExample
             code={`import { SiteWrapper, Container, UsaceBox } from "@usace/groundwork";
-import "@usace/groundwork/dist/groundwork.css";
 
 function App() {
   return (
diff --git a/src/app-pages/documentation/index.jsx b/src/app-pages/documentation/index.jsx
index 46f1473e..b185000c 100644
--- a/src/app-pages/documentation/index.jsx
+++ b/src/app-pages/documentation/index.jsx
@@ -69,13 +69,15 @@ function Docs() {
         </div>
         <div className="gw-flex gw-flex-row gw-justify-start gw-space-between gw-items-center gw-gap-2 gw-mt-3 gw-mb-3">
           <Code className="gw-block gw-p-1 gw-px-2">
-            import "@usace/groundwork/dist/groundwork.css"
+            import "@usace/groundwork/groundwork.css"
           </Code>
-          <CopyButton text={`import "@usace/groundwork/dist/groundwork.css"`} />
+          <CopyButton text={`import "@usace/groundwork/groundwork.css"`} />
         </div>
         <Text>
-          Make sure to import groundwork.css from Groundwork into your top-level
-          component (i.e. App.jsx), then go build stuff with the components
+          Import Groundwork CSS in your application entry point (for example,
+          main.jsx), after your application stylesheet. This keeps stylesheet
+          order predictable and prevents app-wide styles from overriding
+          Groundwork components.
         </Text>
 
         <H4 className="gw-mt-6">Contributing</H4>