diff --git a/package-lock.json b/package-lock.json
index 4f8afe57..f1028782 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "postcss-css-variables": "^0.19.0",
         "postcss-import": "^16.1.0",
         "postcss-safe-parser": "^7.0.0",
+        "postcss-sort-media-queries": "^5.2.0",
         "posthtml": "^0.16.6",
         "posthtml-attrs-parser": "^1.1.1",
         "posthtml-base-url": "^3.1.8",
@@ -449,7 +450,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -472,7 +472,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2023,7 +2022,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3830,7 +3828,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4686,7 +4683,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4941,6 +4937,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-sort-media-queries": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-5.2.0.tgz",
+      "integrity": "sha512-AZ5fDMLD8SldlAYlvi8NIqo0+Z8xnXU2ia0jxmuhxAU+Lqt9K+AlmLNJ/zWEnE9x+Zx3qL3+1K20ATgNOr3fAA==",
+      "license": "MIT",
+      "dependencies": {
+        "sort-css-media-queries": "2.2.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.23"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -4952,7 +4963,6 @@
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
       "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"
@@ -5973,6 +5983,15 @@
         "node": "*"
       }
     },
+    "node_modules/sort-css-media-queries": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.2.0.tgz",
+      "integrity": "sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.3.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6638,7 +6657,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6827,7 +6845,6 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -6944,7 +6961,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6958,7 +6974,6 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",
diff --git a/package.json b/package.json
index 5f4450c9..65ebe087 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
+    "postcss-sort-media-queries": "^5.2.0",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.8",
diff --git a/src/posthtml/index.js b/src/posthtml/index.js
index b9a4a0f3..37154225 100644
--- a/src/posthtml/index.js
+++ b/src/posthtml/index.js
@@ -17,6 +17,7 @@ import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
+import postcssSortMediaQueries from 'postcss-sort-media-queries'
 import postcssColorFunctionalNotation from 'postcss-color-functional-notation'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
@@ -26,18 +27,20 @@ export async function process(html = '', config = {}) {
    * Configure PostCSS pipeline. Plugins defined and added here
    * will apply to all `<style>` tags in the HTML.
    */
-  const resolveCSSProps = get(config, 'css.resolveProps')
+  const resolveCSSProps = get(config, 'css.resolveProps', true)
+  const mediaConfig = get(config, 'css.media')
   const resolveCalc = get(config, 'css.resolveCalc') !== false
-    ? get(config, 'css.resolveCalc', { precision: 2 }) // it's true by default, use default precision 2
+    ? get(config, 'css.resolveCalc', { precision: 2 }) // enabled by default, use default precision 2
     : false
 
   const postcssPlugin = posthtmlPostcss(
     [
       postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCSSProps && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
       postcssColorFunctionalNotation(),
+      mediaConfig && postcssSortMediaQueries(mediaConfig === true ? {} : mediaConfig),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
diff --git a/test/postcss.test.js b/test/postcss.test.js
index 69d03e7d..2ac243ae 100644
--- a/test/postcss.test.js
+++ b/test/postcss.test.js
@@ -110,4 +110,107 @@ describe.concurrent('PostCSS', () => {
           )
       })
   })
+
+  test('css.media', async () => {
+    const html = `
+      <style>
+        @tailwind components;
+        @tailwind utilities;
+
+        .custom {
+          @apply sm:w-[100px];
+        }
+      </style>
+    <div class="custom sm:flex hover:invisible"></div>
+    `
+
+    /**
+     * When using `@apply` and the source content has pseudos like `hover:`,
+     * the utilities generated with `@apply` will be separated in their own
+     * media query blocks.
+     *
+     * This does not happen if the source content does not use things like `hover:` 🤷‍♂️
+     */
+    posthtml(html, {
+      css: {
+        tailwind: {
+          content: [{ raw: html }],
+          theme: {
+            screens: {
+              sm: { max: '600px' },
+              xs: { max: '430px' },
+            },
+          },
+        }
+      }
+    })
+      .then(({ html }) => {
+        expect(cleanString(html))
+          .toBe(
+            cleanString(`
+            <style>
+              @media (max-width: 600px) {
+                .custom {
+                  width: 100px
+                }
+              }
+              .hover\\:invisible:hover {
+                visibility: hidden
+              }
+              @media (max-width: 600px) {
+                .sm\\:flex {
+                  display: flex
+                }
+                .sm\\:w-\\[100px\\] {
+                  width: 100px
+                }
+              }
+            </style>
+            <div class="custom sm:flex hover:invisible"></div>`
+            )
+          )
+      })
+
+    // plugin enabled
+    posthtml(html, {
+      css: {
+        media: {
+          merge: true,
+        },
+        tailwind: {
+          content: [{ raw: html }],
+          theme: {
+            screens: {
+              sm: { max: '600px' },
+              xs: { max: '430px' },
+            },
+          },
+        }
+      }
+    })
+      .then(({ html }) => {
+        expect(cleanString(html))
+          .toBe(
+            cleanString(`
+            <style>
+            .hover\\:invisible:hover {
+              visibility: hidden
+              }
+              @media (max-width: 600px) {
+                .custom {
+                  width: 100px
+                }
+                .sm\\:flex {
+                  display: flex
+                }
+                .sm\\:w-\\[100px\\] {
+                  width: 100px
+                }
+              }
+            </style>
+            <div class="custom sm:flex hover:invisible"></div>`
+            )
+          )
+      })
+  })
 })