diff --git a/app/assets/stylesheets/application_utilities.scss b/app/assets/stylesheets/application_utilities.scss
index 817e983a0ecce64ddd4e7d9c15ef2450db84bf05..da4ee455b4ea7ea61465438aa4e270b9ecde9171 100644
--- a/app/assets/stylesheets/application_utilities.scss
+++ b/app/assets/stylesheets/application_utilities.scss
@@ -7,6 +7,3 @@
   to see the available utility classes.
 **/
 @import 'utilities';
-
-// Gitlab UI util classes
-@import '@gitlab/ui/src/scss/utilities';
diff --git a/app/assets/stylesheets/application_utilities_to_be_replaced.scss b/app/assets/stylesheets/application_utilities_to_be_replaced.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f8c40835a494a65a3ca5f93d69f7f418aeecbade
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities_to_be_replaced.scss
@@ -0,0 +1,4 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+// Gitlab UI util classes
+@import '@gitlab/ui/src/scss/utilities';
diff --git a/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss b/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3c7b3e63b59e38f47db495d3fa5d27bddeb63696
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss
@@ -0,0 +1,3 @@
+@import './themes/dark';
+
+@import 'application_utilities_to_be_replaced';
diff --git a/app/assets/stylesheets/tailwind.css b/app/assets/stylesheets/tailwind.css
index fb8180222b6b759be773f7c665c44163ff463e22..8dd183dd4bd96f9ed0c0731272e5c63b89ed8abc 100644
--- a/app/assets/stylesheets/tailwind.css
+++ b/app/assets/stylesheets/tailwind.css
@@ -1,2 +1,3 @@
 /* stylelint-disable scss/at-rule-no-unknown */
+
 @tailwind utilities;
diff --git a/app/assets/stylesheets/tailwind_all_the_way.css b/app/assets/stylesheets/tailwind_all_the_way.css
new file mode 100644
index 0000000000000000000000000000000000000000..8dd183dd4bd96f9ed0c0731272e5c63b89ed8abc
--- /dev/null
+++ b/app/assets/stylesheets/tailwind_all_the_way.css
@@ -0,0 +1,3 @@
+/* stylelint-disable scss/at-rule-no-unknown */
+
+@tailwind utilities;
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index f6c71fd6fb1994023efa323aa4c04dece5f935a0..faaa3307e836945ac9cfd41550e2e8d5755762ea 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -5,6 +5,7 @@
 -# This is a temporary place for the page specific style migrations to be included on all pages like page_specific_files
 - if Feature.disabled?(:page_specific_styles, current_user)
   - add_page_specific_style('page_bundles/commit_description')
+- tailwind_all_the_way = Feature.enabled?(:tailwind_all_the_way, current_user)
 
 %head{ omit_og ? { } : { prefix: "og: http://ogp.me/ns#" } }
   %meta{ charset: "utf-8" }
@@ -30,11 +31,16 @@
     = stylesheet_link_tag_defer "application_dark"
     = yield :page_specific_styles
     = stylesheet_link_tag_defer "application_utilities_dark"
+    = stylesheet_link_tag_defer "application_utilities_to_be_replaced_dark"
   - else
     = stylesheet_link_tag_defer "application"
     = yield :page_specific_styles
     = stylesheet_link_tag_defer 'application_utilities'
-  = stylesheet_link_tag_defer 'tailwind'
+    = stylesheet_link_tag_defer "application_utilities_to_be_replaced"
+  - if tailwind_all_the_way
+    = stylesheet_link_tag_defer 'tailwind_all_the_way'
+  - else
+    = stylesheet_link_tag_defer 'tailwind'
   = stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
   = stylesheet_link_tag "test_environment", media: "all" if Rails.env.test?
 
diff --git a/config/application.rb b/config/application.rb
index b5c61c097238093660f47a44d73c782bc8f338a9..8e67104a50f455f03be0cbc92cc939d3c83cf64f 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -267,9 +267,12 @@ class Application < Rails::Application
     config.assets.paths << "#{config.root}/vendor/assets/fonts"
 
     config.assets.precompile << "application_utilities.css"
+    config.assets.precompile << "application_utilities_to_be_replaced.css"
     config.assets.precompile << "application_utilities_dark.css"
+    config.assets.precompile << "application_utilities_to_be_replaced_dark.css"
     config.assets.precompile << "application_dark.css"
     config.assets.precompile << "tailwind.css"
+    config.assets.precompile << "tailwind_all_the_way.css"
 
     config.assets.precompile << "print.css"
     config.assets.precompile << "mailer.css"
diff --git a/config/feature_flags/development/tailwind_all_the_way.yml b/config/feature_flags/development/tailwind_all_the_way.yml
new file mode 100644
index 0000000000000000000000000000000000000000..03276ae355fa6981bc7e8ce052aa88e28e4fc341
--- /dev/null
+++ b/config/feature_flags/development/tailwind_all_the_way.yml
@@ -0,0 +1,8 @@
+---
+name: tailwind_all_the_way
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/148202
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/452445
+milestone: '16.11'
+type: development
+group: group::foundations
+default_enabled: false
diff --git a/config/tailwind.all_the_way.config.js b/config/tailwind.all_the_way.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..269468de3f7e243e17a952318bb105ac119bcc6b
--- /dev/null
+++ b/config/tailwind.all_the_way.config.js
@@ -0,0 +1,12 @@
+// const plugin = require('tailwindcss/plugin');
+const tailwindGitLabDefaults = require('./tailwind.config');
+// const utilities = require('./helpers/tailwind/css_in_js');
+
+const { content, ...remainingConfig } = tailwindGitLabDefaults;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content,
+  ...remainingConfig,
+  // This will be filled with life in a follow-up MR
+};
diff --git a/package.json b/package.json
index 7343c6c83467a819b623548ec82fdb4012198290..4134b79553613ca9f0f09faf3a239846544c12eb 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "prejest": "yarn check-dependencies",
     "build:css": "node scripts/frontend/build_css.mjs",
     "tailwindcss:build": "node scripts/frontend/tailwindcss.mjs",
+    "pretailwindcss:build": "TAILWIND_ALL_THE_WAY=1 node scripts/frontend/tailwindcss.mjs",
     "jest": "jest --config jest.config.js",
     "jest-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "jest:ci": "jest --config jest.config.js --ci --coverage --testSequencer ./scripts/frontend/parallel_ci_sequencer.js",
diff --git a/scripts/frontend/tailwindcss.mjs b/scripts/frontend/tailwindcss.mjs
index ca58c41cc789380f9022c8ee89cf23df9fff65d6..2bce47e3c79e482946f6f33a5d97f510d753bc39 100644
--- a/scripts/frontend/tailwindcss.mjs
+++ b/scripts/frontend/tailwindcss.mjs
@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createProcessor } from 'tailwindcss/lib/cli/build/plugin.js';
@@ -6,13 +7,20 @@ import { createProcessor } from 'tailwindcss/lib/cli/build/plugin.js';
 const ROOT_PATH = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../');
 
 async function build({ shouldWatch = false } = {}) {
+  let config = path.join(ROOT_PATH, 'config/tailwind.config.js');
+  let fileName = 'tailwind.css';
+  if (process.env.TAILWIND_ALL_THE_WAY) {
+    config = path.join(ROOT_PATH, 'config/tailwind.all_the_way.config.js');
+    fileName = 'tailwind_all_the_way.css';
+  }
+
   const processor = await createProcessor(
     {
       '--watch': shouldWatch,
-      '--output': path.join(ROOT_PATH, 'app/assets/builds/tailwind.css'),
-      '--input': path.join(ROOT_PATH, 'app/assets/stylesheets/tailwind.css'),
+      '--output': path.join(ROOT_PATH, 'app/assets/builds', fileName),
+      '--input': path.join(ROOT_PATH, 'app/assets/stylesheets', fileName),
     },
-    path.join(ROOT_PATH, 'config/tailwind.config.js'),
+    config,
   );
 
   if (shouldWatch) {