diff --git a/config/e2e.exs b/config/e2e.exs
index 33e9a3fe20..349e351e7e 100644
--- a/config/e2e.exs
+++ b/config/e2e.exs
@@ -1,3 +1,5 @@
 import Config
 
 config :logger, :level, :error
+
+config :phoenix_live_view, :root_tag_attribute, "phx-r"
diff --git a/lib/mix/tasks/compile/phoenix_live_view.ex b/lib/mix/tasks/compile/phoenix_live_view.ex
index 957698d013..a2a8683b19 100644
--- a/lib/mix/tasks/compile/phoenix_live_view.ex
+++ b/lib/mix/tasks/compile/phoenix_live_view.ex
@@ -2,8 +2,8 @@ defmodule Mix.Tasks.Compile.PhoenixLiveView do
   @moduledoc """
   A LiveView compiler for HEEx macro components.
 
-  Right now, only `Phoenix.LiveView.ColocatedHook` and `Phoenix.LiveView.ColocatedJS`
-  are handled.
+  Right now, only `Phoenix.LiveView.ColocatedHook`, `Phoenix.LiveView.ColocatedJS`,
+  and `Phoenix.LiveView.ColocatedCSS` are handled.
 
   You must add it to your `mix.exs` as:
 
@@ -30,5 +30,6 @@ defmodule Mix.Tasks.Compile.PhoenixLiveView do
 
   defp compile do
     Phoenix.LiveView.ColocatedJS.compile()
+    Phoenix.LiveView.ColocatedCSS.compile()
   end
 end
diff --git a/lib/phoenix_live_view/colocated_css.ex b/lib/phoenix_live_view/colocated_css.ex
new file mode 100644
index 0000000000..1933604fd5
--- /dev/null
+++ b/lib/phoenix_live_view/colocated_css.ex
@@ -0,0 +1,397 @@
+defmodule Phoenix.LiveView.ColocatedCSS do
+  @moduledoc ~S'''
+  A special HEEx `:type` that extracts any CSS styles from a colocated `<style>` tag at compile time.
+
+  Note: To use `ColocatedCSS`, you need to run Phoenix 1.8+.
+
+  Note: `ColocatedCSS` **must** be defined at the very beginning of the template in which it is used.
+
+  You can use `ColocatedCSS` to define any CSS styles directly in your components, for example:
+
+  ```heex
+  <style :type={Phoenix.LiveView.ColocatedCSS}>
+    .sample-class {
+        background-color: #FFFFFF;
+    }
+  </style>
+  ```
+
+  ## Scoped CSS
+
+  By default, Colocated CSS styles are scoped at compile time to the template in which they are defined.
+  This provides style encapsulation preventing CSS rules within a component from unintentionally applying
+  to elements in other nested components. Scoping is performed via the use of the `@scope` CSS at-rule.
+  For more information, see [the docs on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope).
+
+  To prevent Colocated CSS styles from being scoped to the current template you can provide the `global`
+  attribute, for example:
+
+  ```heex
+  <style :type={Phoenix.LiveView.ColocatedCSS} global>
+    .sample-class {
+        background-color: #FFFFFF;
+    }
+  </style>
+  ```
+
+  **Note:** When using Scoped Colocated CSS with implicit `inner_block` slots or named slots, the content
+  provided will be scoped to the parent template which is providing the content, not the component which
+  defines the slot. For example, in the following snippet the elements within [`intersperse/1`](`Phoenix.Component.intersperse/1`)'s
+  `inner_block` and `separator` slots will both be styled by the `.sample-class` rule, not any rules defined within the
+  [`intersperse/1`](`Phoenix.Component.intersperse/1`) component itself:
+
+  ```heex
+  <style :type={Phoenix.LiveView.ColocatedCSS}>
+    .sample-class {
+        background-color: #FFFFFF;
+    }
+  </style>
+  <div class="sample-class">
+    <.intersperse :let={item} enum={[1, 2, 3]}>
+      <:separator>
+        <span class="sample-class">|</span>
+      </:separator>
+      <div class="sample-class">
+        <p>Item {item}</p>
+      </div>
+    </.intersperse>
+  </div>
+  ```
+
+  > #### Warning! {: .warning}
+  >
+  > The `@scope` CSS at-rule is Baseline available as of the end of 2025. To ensure that Scoped CSS will
+  > work on the browsers you need, be sure to check [Can I Use?](https://caniuse.com/css-cascade-scope) for
+  > browser compatibility.
+
+  > #### Tip {: .info}
+  >
+  > When Colocated CSS is scoped via the `@scope` rule, all "local root" elements in the given template serve as scoping roots.
+  > "Local root" elements are the outermost elements of the template itself and the outermost elements of any content passed to
+  > child components' slots. For selectors in your Colocated CSS to target the scoping root, you will need to
+  > specify the scoping root in the selector via the use of the `:scope` pseudo-selector. For more details,
+  > see [the docs on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope#scope_pseudo-class_within_scope_blocks).
+
+  ## Internals
+
+  While compiling the template, colocated CSS is extracted into a special folder inside the
+  `Mix.Project.build_path()`, called `phoenix-colocated-css`. This is customizable, as we'll see below,
+  but it is important that it is a directory that is not tracked by version control, because the
+  components are the source of truth for the code. Also, the directory is shared between applications
+  (this also applies to applications in umbrella projects), so it should typically also be a shared
+  directory not specific to a single application.
+
+  The colocated CSS directory follows this structure:
+
+  ```text
+  _build/$MIX_ENV/phoenix-colocated-css/
+  _build/$MIX_ENV/phoenix-colocated-css/my_app/
+  _build/$MIX_ENV/phoenix-colocated-css/my_app/colocated.css
+  _build/$MIX_ENV/phoenix-colocated-css/my_app/MyAppWeb.DemoLive/line_HASH.css
+  _build/$MIX_ENV/phoenix-colocated-css/my_dependency/MyDependency.Module/line_HASH.css
+  ...
+  ```
+
+  Each application has its own folder. Inside, each module also gets its own folder, which allows
+  us to track and clean up outdated code.
+
+  > #### A note on dependencies and umbrella projects {: .info}
+  >
+  > For each application that uses colocated CSS, a separate directory is created
+  > inside the `phoenix-colocated-css` folder. This allows to have clear separation between
+  > styles of dependencies, but also applications inside umbrella projects.
+
+  To use colocated CSS, your bundler needs to be configured to resolve the
+  `phoenix-colocated-css` folder. For new Phoenix applications, this configuration is already included
+  in the esbuild configuration inside `config.exs`:
+
+      config :esbuild,
+        ...
+        my_app: [
+          args:
+            ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),
+          cd: Path.expand("../assets", __DIR__),
+          env: %{
+            "NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]
+          }
+        ]
+
+  The important part here is the `NODE_PATH` environment variable, which tells esbuild to also look
+  for packages inside the `deps` folder, as well as the `Mix.Project.build_path()`, which resolves to
+  `_build/$MIX_ENV`. If you use a different bundler, you'll need to configure it accordingly. If it is not
+  possible to configure the `NODE_PATH`, you can also change the folder to which LiveView writes colocated
+  CSS by setting the `:target_directory` option in your `config.exs`:
+
+  ```elixir
+  config :phoenix_live_view, :colocated_css,
+    target_directory: Path.expand("../assets/css/phoenix-colocated-css", __DIR__)
+  ```
+
+  > #### Tip {: .info}
+  >
+  > If you remove or modify the contents of the `:target_directory` folder, you can use
+  > `mix clean --all` and `mix compile` to regenerate all colocated CSS.
+
+  > #### Warning! {: .warning}
+  >
+  > LiveView assumes full ownership over the configured `:target_directory`. When
+  > compiling, it will **delete** any files and folders inside the `:target_directory`,
+  > that it does not associate with a colocated CSS file.
+
+  To bundle and use colocated CSS with esbuild, you can import it like this in your `app.js` file:
+
+  ```javascript
+  import "phoenix-colocated-css/my_app/colocated.css"
+  ```
+
+  Importing CSS in your `app.js` file will cause esbuild to generate a separate `app.css` file.
+  To load it, simply add a second `<link>` to your `root.html.heex` file, like so:
+
+  ```html
+  <link phx-track-static rel="stylesheet" href={~p"/assets/js/app.css"} />
+  ```
+
+  ## Options
+
+  Colocated CSS can be configured through the attributes of the `<style>` tag.
+  The supported attributes are:
+
+    * `global` - If provided, the Colocated CSS rules contained within the `<style>` tag
+      will not be scoped to the template within which it is defined, and will instead act
+      as global CSS rules.
+
+    * `lower-bound` - Configure whether or not the the lower-bound of Scoped Colocated CSS is inclusive, that is,
+      root elements of child components can be styled by the parent component's Colocated CSS. This can be
+      useful for applying styles to the child component's root elements for layout purposes. Valid values are
+      `"inclusive"` and `"exclusive"`. Scoped Colocated CSS defaults to `"exclusive"`, so that styles are entirely
+      scoped to the parent unless otherwise specified.
+  '''
+
+  @behaviour Phoenix.Component.MacroComponent
+
+  alias Phoenix.Component.MacroComponent
+
+  @impl true
+  def transform({"style", attributes, [text_content], _tag_meta} = _ast, meta) do
+    validate_phx_version!()
+
+    opts = Map.new(attributes)
+
+    validate_opts!(opts)
+
+    {scope, data} = extract(opts, text_content, meta)
+
+    # we always drop colocated CSS from the rendered output
+    {:ok, "", data, [root_tag_attribute: {"phx-css", scope}]}
+  end
+
+  def transform(_ast, _meta) do
+    raise ArgumentError, "ColocatedCSS can only be used on style tags"
+  end
+
+  defp validate_phx_version! do
+    phoenix_version = to_string(Application.spec(:phoenix, :vsn))
+
+    if not Version.match?(phoenix_version, "~> 1.8.0-rc.4") do
+      # TODO: bump message to 1.8 once released to avoid confusion
+      raise ArgumentError, ~s|ColocatedCSS requires at least {:phoenix, "~> 1.8.0-rc.4"}|
+    end
+  end
+
+  defp validate_opts!(opts) do
+    Enum.each(opts, fn {key, val} -> validate_opt!({key, val}, Map.delete(opts, key)) end)
+  end
+
+  defp validate_opt!({"global", val}, other_opts) when val in [nil, true] do
+    case other_opts do
+      %{"lower-bound" => _} ->
+        raise ArgumentError,
+              "colocated css must be scoped to use the `lower-bound` attribute, but `global` attribute was provided"
+
+      _ ->
+        :ok
+    end
+  end
+
+  defp validate_opt!({"global", val}, _other_opts) do
+    raise ArgumentError,
+          "expected nil or true for the `global` attribute of colocated css, got: #{inspect(val)}"
+  end
+
+  defp validate_opt!({"lower-bound", val}, _other_opts) when val in ["inclusive", "exclusive"] do
+    :ok
+  end
+
+  defp validate_opt!({"lower-bound", val}, _other_opts) do
+    raise ArgumentError,
+          ~s|expected "inclusive" or "exclusive" for the `lower-bound` attribute of colocated css, got: #{inspect(val)}|
+  end
+
+  defp validate_opt!(_opt, _other_opts), do: :ok
+
+  @doc false
+  def extract(opts, text_content, meta) do
+    # _build/dev/phoenix-colocated-css/otp_app/MyApp.MyComponent/line_no.css
+    target_path = Path.join(target_dir(), inspect(meta.env.module))
+
+    scope = scope(meta)
+    root_tag_attribute = root_tag_attribute()
+
+    upper_bound_selector = ~s|[phx-css="#{scope}"]|
+    lower_bound_selector = ~s|[#{root_tag_attribute}]|
+
+    lower_bound_selector =
+      case opts do
+        %{"lower-bound" => "inclusive"} -> lower_bound_selector <> " > *"
+        _ -> lower_bound_selector
+      end
+
+    styles =
+      case opts do
+        %{"global" => _} ->
+          text_content
+
+        _ ->
+          "@scope (#{upper_bound_selector}) to (#{lower_bound_selector}) { #{text_content} }"
+      end
+
+    filename = "#{meta.env.line}_#{hash(styles)}.css"
+
+    File.mkdir_p!(target_path)
+
+    target_path
+    |> Path.join(filename)
+    |> File.write!(styles)
+
+    {scope, filename}
+  end
+
+  defp scope(meta) do
+    hash("#{meta.env.module}_#{meta.env.line}")
+  end
+
+  defp hash(string) do
+    string
+    |> then(&:crypto.hash(:md5, &1))
+    |> Base.encode32(case: :lower, padding: false)
+  end
+
+  defp root_tag_attribute() do
+    case Application.get_env(:phoenix_live_view, :root_tag_attribute) do
+      configured_attribute when is_binary(configured_attribute) ->
+        configured_attribute
+
+      configured_attribute ->
+        message = """
+        a global :root_tag_attribute must be configured to use colocated css
+
+        Expected global :root_tag_attribute to be a string, got: #{inspect(configured_attribute)}
+
+        The global :root_tag_attribute is usually configured to `"phx-r"`, but it needs to be explicitly enabled in your configuration:
+
+            config :phoenix_live_view, root_tag_attribute: "phx-r"
+
+        You can also use a different value than `"phx-r"`.
+        """
+
+        raise ArgumentError, message
+    end
+  end
+
+  @doc false
+  def compile do
+    # this step runs after all modules have been compiled
+    # so we can write the final css manifest file and remove any
+    # outdated colocated css files
+    clear_manifest!()
+    files = clear_outdated_and_get_files!()
+    write_new_manifest!(files)
+  end
+
+  defp clear_manifest! do
+    target_dir()
+    |> Path.join("*")
+    |> Path.wildcard()
+    |> Enum.filter(&File.regular?(&1))
+    |> Enum.each(&File.rm!(&1))
+  end
+
+  defp clear_outdated_and_get_files! do
+    target_dir = target_dir()
+    modules = subdirectories(target_dir)
+
+    Enum.flat_map(modules, fn module_folder ->
+      module = Module.concat([Path.basename(module_folder)])
+      process_module(module_folder, module)
+    end)
+  end
+
+  defp process_module(module_folder, module) do
+    with true <- Code.ensure_loaded?(module),
+         data when data != [] <- MacroComponent.get_data(module, __MODULE__) do
+      expected_files = data
+      files = File.ls!(module_folder)
+
+      outdated_files = files -- expected_files
+
+      for file <- outdated_files do
+        module_folder
+        |> Path.join(file)
+        |> File.rm!()
+      end
+
+      Enum.map(data, fn filename ->
+        _absolute_file_path = Path.join(module_folder, filename)
+      end)
+    else
+      _ ->
+        # either the module does not exist any more or
+        # does not have any colocated CSS
+        File.rm_rf!(module_folder)
+        []
+    end
+  end
+
+  defp write_new_manifest!(files) do
+    target_dir = target_dir()
+    manifest = Path.join(target_dir, "colocated.css")
+
+    content =
+      if files == [] do
+        # Ensure that the directory exists to write
+        # an empty manifest file in the case that no colocated css
+        # files were generated (which would have already created
+        # the directory)
+        File.mkdir_p!(target_dir)
+
+        ""
+      else
+        Enum.reduce(files, [], fn file, acc ->
+          line = ~s[@import "./#{Path.relative_to(file, target_dir)}";\n]
+          [acc | line]
+        end)
+      end
+
+    File.write!(manifest, content)
+  end
+
+  defp target_dir do
+    default = Path.join(Mix.Project.build_path(), "phoenix-colocated-css")
+    app = to_string(Mix.Project.config()[:app])
+
+    global_settings()
+    |> Keyword.get(:target_directory, default)
+    |> Path.join(app)
+  end
+
+  defp global_settings do
+    Application.get_env(:phoenix_live_view, :colocated_css, [])
+  end
+
+  defp subdirectories(path) do
+    path
+    |> Path.join("*")
+    |> Path.wildcard()
+    |> Enum.filter(&File.dir?(&1))
+  end
+end
diff --git a/package-lock.json b/package-lock.json
index c20e18eaa3..ae56c89a34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@babel/preset-env": "7.27.2",
         "@babel/preset-typescript": "^7.27.1",
         "@eslint/js": "^9.29.0",
-        "@playwright/test": "^1.56.1",
+        "@playwright/test": "^1.58.0",
         "@types/jest": "^30.0.0",
         "@types/phoenix": "^1.6.6",
         "css.escape": "^1.5.1",
@@ -2966,13 +2966,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
-      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.0.tgz",
+      "integrity": "sha512-fWza+Lpbj6SkQKCrU6si4iu+fD2dD3gxNHFhUPxsfXBPhnv3rRSQVd0NtBUT9Z/RhF/boCBcuUaMUSTRTopjZg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.56.1"
+        "playwright": "1.58.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7156,13 +7156,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
-      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.0.tgz",
+      "integrity": "sha512-2SVA0sbPktiIY/MCOPX8e86ehA/e+tDNq+e5Y8qjKYti2Z/JG7xnronT/TXTIkKbYGWlCbuucZ6dziEgkoEjQQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.56.1"
+        "playwright-core": "1.58.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7175,9 +7175,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.56.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
-      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.0.tgz",
+      "integrity": "sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index cf71482b2a..e00bd5de67 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.29.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.58.0",
     "@types/jest": "^30.0.0",
     "@types/phoenix": "^1.6.6",
     "css.escape": "^1.5.1",
diff --git a/test/e2e/support/colocated_live.ex b/test/e2e/support/colocated_live.ex
index 47b493bed7..1c97e020df 100644
--- a/test/e2e/support/colocated_live.ex
+++ b/test/e2e/support/colocated_live.ex
@@ -69,6 +69,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
       // initialize js exec handler from colocated js
       colocated.js_exec(liveSocket)
     </script>
+    <link rel="stylesheet" href="/assets/colocated_css/colocated.css" />
 
     {@inner_content}
     """
@@ -151,6 +152,13 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
     end
     </pre>
 
+    <.global_colocated_css />
+    <p data-test="global" class="test-global-css">Should have red background</p>
+    <.scoped_colocated_css />
+    <p data-test="scoped" class="test-scoped-css">Should have no background (out of scope)</p>
+    <.scoped_inclusive_lower_bound_colocated_css />
+    <.scoped_exclusive_lower_bound_colocated_css />
+
     <.lv_code_sample />
     """
   end
@@ -184,4 +192,155 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
     </pre>
     '''
   end
+
+  defp global_colocated_css(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS} global>
+      .test-global-css { background-color: rgb(255, 0, 0); }
+    </style>
+    """
+  end
+
+  defp scoped_colocated_css(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS}>
+      .test-scoped-css { background-color: rgb(0, 0, 255); }
+    </style>
+    <div>
+      <span data-test-scoped="blue" class="test-scoped-css">Should have blue background</span>
+      <.scoped_css_inner_block_one>
+        <span data-test-scoped="none" class="test-scoped-css">
+          Should have no background (scope root)
+          <span data-test-scoped="blue" class="test-scoped-css">
+            Should have blue background
+          </span>
+        </span>
+      </.scoped_css_inner_block_one>
+      <.scoped_css_inner_block_one>
+        <span data-test-scoped="none" class="test-scoped-css">
+          Should have no background (scope root)
+          <span data-test-scoped="blue" class="test-scoped-css">
+            Should have blue background
+          </span>
+        </span>
+      </.scoped_css_inner_block_one>
+      <.scoped_css_inner_block_two>
+        <span data-test-scoped="none" class="test-scoped-css">
+          Should have no background (scope root)
+          <span data-test-scoped="blue" class="test-scoped-css">
+            Should have blue background
+          </span>
+        </span>
+      </.scoped_css_inner_block_two>
+      <.scoped_css_slot_one>
+        <:test>
+          <span data-test-scoped="none" class="test-scoped-css">
+            Should have no background (scope root)
+            <span data-test-scoped="blue" class="test-scoped-css">
+              Should have blue background
+            </span>
+          </span>
+        </:test>
+      </.scoped_css_slot_one>
+      <.scoped_css_slot_two>
+        <:test>
+          <span data-test-scoped="none" class="test-scoped-css">
+            Should have no background (scope root)
+            <span data-test-scoped="blue" class="test-scoped-css">
+              Should have blue background
+            </span>
+          </span>
+        </:test>
+      </.scoped_css_slot_two>
+    </div>
+    """
+  end
+
+  slot :inner_block, required: true
+
+  defp scoped_css_inner_block_one(assigns) do
+    ~H"""
+    {render_slot(@inner_block)}
+    """
+  end
+
+  slot :inner_block, required: true
+
+  defp scoped_css_inner_block_two(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS}>
+      .test-scoped-css { background-color: rgb(255, 255, 0); }
+    </style>
+    <div>
+      <span data-test-scoped="yellow" class="test-scoped-css">Should have yellow background</span>
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
+
+  slot :test, required: true
+
+  defp scoped_css_slot_one(assigns) do
+    ~H"""
+    {render_slot(@test)}
+    """
+  end
+
+  slot :test, required: true
+
+  defp scoped_css_slot_two(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS}>
+      .test-scoped-css { background-color: rgb(0, 255, 0); }
+    </style>
+    <div>
+      <span data-test-scoped="green" class="test-scoped-css">Should have green background</span>
+      {render_slot(@test)}
+    </div>
+    """
+  end
+
+  defp scoped_exclusive_lower_bound_colocated_css(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS}>
+      .container:where(:scope) {
+        display: flex;
+
+        > * {
+          flex: 1;
+        }
+      }
+    </style>
+    <div data-test-lower-bound-container class="container">
+      <.flex_items should_flex?={false} />
+    </div>
+    """
+  end
+
+  defp scoped_inclusive_lower_bound_colocated_css(assigns) do
+    ~H"""
+    <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="inclusive">
+      .container:where(:scope) {
+        display: flex;
+
+        > * {
+          flex: 1;
+        }
+      }
+    </style>
+    <div data-test-lower-bound-container class="container">
+      <.flex_items should_flex?={true} />
+    </div>
+    """
+  end
+
+  attr :should_flex?, :boolean, required: true
+
+  defp flex_items(assigns) do
+    ~H"""
+    <p :for={x <- 1..3} data-test-inclusive={if @should_flex?, do: "yes", else: "no"}>
+      {if @should_flex?, do: "Should", else: "Shouldn't"} Flex {x}
+    </p>
+    """
+  end
 end
diff --git a/test/e2e/test_helper.exs b/test/e2e/test_helper.exs
index 5b60354ca2..538485a441 100644
--- a/test/e2e/test_helper.exs
+++ b/test/e2e/test_helper.exs
@@ -277,6 +277,10 @@ defmodule Phoenix.LiveViewTest.E2E.Endpoint do
     from: Path.join(Mix.Project.build_path(), "phoenix-colocated/phoenix_live_view"),
     at: "/assets/colocated"
 
+  plug Plug.Static,
+    from: Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view"),
+    at: "/assets/colocated_css"
+
   plug Plug.Static, from: System.tmp_dir!(), at: "/tmp"
 
   plug :health_check
@@ -316,8 +320,9 @@ end
 
 IO.puts("Starting e2e server on port #{Phoenix.LiveViewTest.E2E.Endpoint.config(:http)[:port]}")
 
-# we need to manually compile the colocated hooks / js
+# we need to manually compile the colocated hooks / js and css
 Phoenix.LiveView.ColocatedJS.compile()
+Phoenix.LiveView.ColocatedCSS.compile()
 
 if not IEx.started?() do
   # when running the test server manually, we halt after
diff --git a/test/e2e/tests/colocated.spec.js b/test/e2e/tests/colocated.spec.js
index b0d6e1c672..2adfdd2daf 100644
--- a/test/e2e/tests/colocated.spec.js
+++ b/test/e2e/tests/colocated.spec.js
@@ -41,3 +41,85 @@ test("custom macro component works (syntax highlighting)", async ({ page }) => {
     page.locator("pre").nth(1).getByText("@temperature"),
   ).toHaveClass("na");
 });
+
+test("global colocated css works", async ({ page }) => {
+  await page.goto("/colocated");
+  await syncLV(page);
+
+  await expect(page.locator('[data-test="global"]')).toHaveCSS(
+    "background-color",
+    "rgb(255, 0, 0)",
+  );
+});
+
+test("scoped colocated css works", async ({ page }) => {
+  await page.goto("/colocated");
+  await syncLV(page);
+
+  await expect(page.locator('[data-test="scoped"]')).toHaveCSS(
+    "background-color",
+    "rgba(0, 0, 0, 0)",
+  );
+
+  const blueLocator = page.locator('[data-test-scoped="blue"]');
+
+  await expect(blueLocator).toHaveCount(6);
+
+  for (const shouldBeBlue in blueLocator.all()) {
+    await expect(shouldBeBlue).toHaveCSS("background-color", "rgb(0, 0, 255)");
+  }
+
+  const noneLocator = page.locator('[data-test-scoped="none"]');
+
+  await expect(noneLocator).toHaveCount(5);
+
+  for (const shouldBeTransparent in noneLocator.all()) {
+    await expect(shouldBeTransparent).toHaveCSS(
+      "background-color",
+      "rgba(0, 0, 0, 0)",
+    );
+  }
+
+  await expect(page.locator('[data-test-scoped="yellow"]')).toHaveCSS(
+    "background-color",
+    "rgb(255, 255, 0)",
+  );
+
+  await expect(page.locator('[data-test-scoped="green"]')).toHaveCSS(
+    "background-color",
+    "rgb(0, 255, 0)",
+  );
+});
+
+test("scoped colocated css lower bound inclusive/exclusive works", async ({
+  page,
+}) => {
+  await page.goto("/colocated");
+  await syncLV(page);
+
+  const lowerBoundContainerLocator = page.locator(
+    "[data-test-lower-bound-container]",
+  );
+
+  await expect(lowerBoundContainerLocator).toHaveCount(2);
+
+  for (const shouldBeFlex in lowerBoundContainerLocator.all()) {
+    await expect(shouldBeFlex).toHaveCSS("display", "flex");
+  }
+
+  const inclusiveFlexItemsLocator = page.locator('[data-test-inclusive="yes"]');
+
+  await expect(inclusiveFlexItemsLocator).toHaveCount(3);
+
+  for (const shouldFlex in inclusiveFlexItemsLocator.all()) {
+    await expect(shouldFlex).toHaveCSS("flex", "1");
+  }
+
+  const exclusiveFlexItemsLocator = page.locator('[data-test-inclusive="yes"]');
+
+  await expect(exclusiveFlexItemsLocator).toHaveCount(3);
+
+  for (const shouldntFlex in exclusiveFlexItemsLocator.all()) {
+    await expect(shouldntFlex).not().toHaveCSS("flex", "1");
+  }
+});
diff --git a/test/phoenix_live_view/colocated_css_test.exs b/test/phoenix_live_view/colocated_css_test.exs
new file mode 100644
index 0000000000..edb9fb8fd3
--- /dev/null
+++ b/test/phoenix_live_view/colocated_css_test.exs
@@ -0,0 +1,284 @@
+defmodule Phoenix.LiveView.ColocatedCSSTest do
+  # we set async: false because we call the colocated CSS compiler
+  # and it reads / writes to a shared folder, and also because
+  # we manipulate the Application env for :root_tag_attribute
+  use ExUnit.Case, async: false
+
+  alias Phoenix.LiveView.TagEngine.Tokenizer.ParseError
+
+  setup do
+    Application.put_env(:phoenix_live_view, :root_tag_attribute, "phx-r")
+    on_exit(fn -> Application.delete_env(:phoenix_live_view, :root_tag_attribute) end)
+  end
+
+  describe "global styles" do
+    test "are extracted and available under manifest import" do
+      defmodule TestGlobalComponent do
+        use Phoenix.Component
+
+        def fun(assigns) do
+          ~H"""
+          <style :type={Phoenix.LiveView.ColocatedCSS} global>
+            .sample-class { background-color: #FFFFFF; }
+          </style>
+          """
+        end
+      end
+
+      assert module_folders =
+               File.ls!(
+                 Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view")
+               )
+
+      assert folder =
+               Enum.find(module_folders, fn folder ->
+                 folder =~ ~r/#{inspect(__MODULE__)}\.TestGlobalComponent$/
+               end)
+
+      assert [style] =
+               Path.wildcard(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/#{folder}/*.css"
+                 )
+               )
+
+      assert File.read!(style) == "\n  .sample-class { background-color: #FFFFFF; }\n"
+
+      # now write the manifest manually as we are in a test
+      Phoenix.LiveView.ColocatedCSS.compile()
+
+      assert manifest =
+               File.read!(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/colocated.css"
+                 )
+               )
+
+      path =
+        Path.relative_to(
+          style,
+          Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/")
+        )
+
+      # style is in manifest
+      assert manifest =~ ~s[@import "./#{path}";\n]
+    after
+      :code.delete(__MODULE__.TestGlobalComponent)
+      :code.purge(__MODULE__.TestGlobalComponent)
+    end
+
+    test "raises for invalid global attribute value" do
+      message = ~r/expected nil or true for the `global` attribute of colocated css, got: "bad"/
+
+      assert_raise ParseError,
+                   message,
+                   fn ->
+                     defmodule TestBadGlobalAttrComponent do
+                       use Phoenix.Component
+
+                       def fun(assigns) do
+                         ~H"""
+                         <style :type={Phoenix.LiveView.ColocatedCSS} global="bad">
+                           .sample-class { background-color: #FFFFFF; }
+                         </style>
+                         """
+                       end
+                     end
+                   end
+    after
+      :code.delete(__MODULE__.TestBadGlobalAttrComponent)
+      :code.purge(__MODULE__.TestBadGlobalAttrComponent)
+    end
+
+    test "raises if scoped css specific options are provided" do
+      message =
+        ~r/colocated css must be scoped to use the `lower-bound` attribute, but `global` attribute was provided/
+
+      assert_raise ParseError,
+                   message,
+                   fn ->
+                     defmodule TestScopedAttrWhileGlobalComponent do
+                       use Phoenix.Component
+
+                       def fun(assigns) do
+                         ~H"""
+                         <style :type={Phoenix.LiveView.ColocatedCSS} global lower-bound="inclusive">
+                           .sample-class { background-color: #FFFFFF; }
+                         </style>
+                         """
+                       end
+                     end
+                   end
+    after
+      :code.delete(__MODULE__.TestScopedAttrWhileGlobalComponent)
+      :code.purge(__MODULE__.TestScopedAttrWhileGlobalComponent)
+    end
+  end
+
+  describe "scoped styles" do
+    test "with exclusive (default) lower-bound is extracted and available under manifest import" do
+      defmodule TestScopedExclusiveComponent do
+        use Phoenix.Component
+
+        def fun(assigns) do
+          ~H"""
+          <style :type={Phoenix.LiveView.ColocatedCSS}>
+            .sample-class { background-color: #FFFFFF; }
+          </style>
+          """
+        end
+      end
+
+      assert module_folders =
+               File.ls!(
+                 Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view")
+               )
+
+      assert folder =
+               Enum.find(module_folders, fn folder ->
+                 folder =~ ~r/#{inspect(__MODULE__)}\.TestScopedExclusiveComponent$/
+               end)
+
+      assert [style] =
+               Path.wildcard(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/#{folder}/*.css"
+                 )
+               )
+
+      file_contents = File.read!(style)
+
+      file_contents =
+        Regex.replace(~r/phx-css=".+?"/, file_contents, ~s|phx-css="SCOPE_HERE"|)
+
+      # The scope is a generated value, so for testing reliability we just replace it with a known
+      # value to assert against.
+      assert file_contents ==
+               ~s|@scope ([phx-css="SCOPE_HERE"]) to ([phx-r]) { \n  .sample-class { background-color: #FFFFFF; }\n }|
+
+      # now write the manifest manually as we are in a test
+      Phoenix.LiveView.ColocatedCSS.compile()
+
+      assert manifest =
+               File.read!(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/colocated.css"
+                 )
+               )
+
+      path =
+        Path.relative_to(
+          style,
+          Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/")
+        )
+
+      # style is in manifest
+      assert manifest =~ ~s[@import "./#{path}";\n]
+    after
+      :code.delete(__MODULE__.TestScopedExclusiveComponent)
+      :code.purge(__MODULE__.TestScopedExclusiveComponent)
+    end
+
+    test "with inclusive lower-bound is extracted and available under manifest import" do
+      defmodule TestScopedInclusiveComponent do
+        use Phoenix.Component
+
+        def fun(assigns) do
+          ~H"""
+          <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="inclusive">
+            .sample-class { background-color: #FFFFFF; }
+          </style>
+          """
+        end
+      end
+
+      assert module_folders =
+               File.ls!(
+                 Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view")
+               )
+
+      assert folder =
+               Enum.find(module_folders, fn folder ->
+                 folder =~ ~r/#{inspect(__MODULE__)}\.TestScopedInclusiveComponent$/
+               end)
+
+      assert [style] =
+               Path.wildcard(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/#{folder}/*.css"
+                 )
+               )
+
+      file_contents = File.read!(style)
+
+      file_contents =
+        Regex.replace(~r/phx-css=".+?"/, file_contents, ~s|phx-css="SCOPE_HERE"|)
+
+      # The scope is a generated value, so for testing reliability we just replace it with a known
+      # value to assert against.
+      assert file_contents ==
+               ~s|@scope ([phx-css="SCOPE_HERE"]) to ([phx-r] > *) { \n  .sample-class { background-color: #FFFFFF; }\n }|
+
+      # now write the manifest manually as we are in a test
+      Phoenix.LiveView.ColocatedCSS.compile()
+
+      assert manifest =
+               File.read!(
+                 Path.join(
+                   Mix.Project.build_path(),
+                   "phoenix-colocated-css/phoenix_live_view/colocated.css"
+                 )
+               )
+
+      path =
+        Path.relative_to(
+          style,
+          Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/")
+        )
+
+      # style is in manifest
+      assert manifest =~ ~s[@import "./#{path}";\n]
+    after
+      :code.delete(__MODULE__.TestScopedInclusiveComponent)
+      :code.purge(__MODULE__.TestScopedInclusiveComponent)
+    end
+
+    test "raises for invalid lower-bound attribute value" do
+      message =
+        ~r/expected "inclusive" or "exclusive" for the `lower-bound` attribute of colocated css, got: "unknown"/
+
+      assert_raise ParseError,
+                   message,
+                   fn ->
+                     defmodule TestBadLowerBoundAttrComponent do
+                       use Phoenix.Component
+
+                       def fun(assigns) do
+                         ~H"""
+                         <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="unknown">
+                           .sample-class { background-color: #FFFFFF; }
+                         </style>
+                         """
+                       end
+                     end
+                   end
+    after
+      :code.delete(__MODULE__.TestBadLowerBoundAttrComponent)
+      :code.purge(__MODULE__.TestBadLowerBoundAttrComponent)
+    end
+  end
+
+  test "writes empty manifest when no colocated styles exist" do
+    manifest =
+      Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/colocated.css")
+
+    Phoenix.LiveView.ColocatedCSS.compile()
+    assert File.exists?(manifest)
+    assert File.read!(manifest) == ""
+  end
+end