diff --git a/packages/x-components/.postcssrc.js b/packages/x-components/.postcssrc.js
deleted file mode 100644
index b5c4eba7df..0000000000
--- a/packages/x-components/.postcssrc.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('tailwindcss/nesting'),
-    require('autoprefixer'),
-    require('postcss-logical'),
-    require('postcss-dir-pseudo-class'),
-  ],
-}
diff --git a/packages/x-components/eslint.config.mjs b/packages/x-components/eslint.config.mjs
index 0fc36a7438..489d9dd0fc 100644
--- a/packages/x-components/eslint.config.mjs
+++ b/packages/x-components/eslint.config.mjs
@@ -2,13 +2,7 @@ import { empathyco } from '@empathyco/eslint-config'
 
 export default empathyco(
   {
-    ignores: [
-      '.loaded_actions',
-      'vite.config.ts',
-      'tailwind.config.ts',
-      'jest.setup.ts',
-      'cypress.config.ts',
-    ],
+    ignores: ['.loaded_actions', 'vite.config.ts', 'jest.setup.ts', 'cypress.config.ts'],
   },
   {
     files: ['**/*.spec.{ts,tsx,js,jsx}'],
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 91fa0ff40d..91d1bc24f9 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -99,9 +99,10 @@
     "@badeball/cypress-cucumber-preprocessor": "24.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.8",
     "@cucumber/messages": "32.0.1",
-    "@empathyco/x-tailwindcss": "2.0.0-alpha.22",
+    "@empathyco/x-design-system": "0.0.2-alpha.1",
     "@microsoft/api-documenter": "7.28.2",
     "@microsoft/api-extractor": "7.55.2",
+    "@tailwindcss/vite": "4.1.18",
     "@testing-library/jest-dom": "6.9.1",
     "@types/aria-query": "5.0.4",
     "@types/jest": "29.5.14",
@@ -109,16 +110,12 @@
     "@vitejs/plugin-vue": "5.2.4",
     "@vue/test-utils": "2.4.6",
     "@vue/vue3-jest": "29.2.6",
-    "autoprefixer": "10.4.23",
     "convert-source-map": "2.0.0",
     "cypress": "15.9.0",
     "esbuild": "0.27.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-scss-transform": "1.0.4",
-    "postcss": "8.5.6",
-    "postcss-dir-pseudo-class": "7.0.2",
-    "postcss-logical": "4.0.2",
     "rimraf": "3.0.2",
     "rollup": "4.56.0",
     "rollup-plugin-copy": "3.5.0",
@@ -128,7 +125,7 @@
     "rollup-plugin-vue": "6.0.0",
     "sass": "1.97.3",
     "start-server-and-test": "2.1.3",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.1.18",
     "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
diff --git a/packages/x-components/src/main.ts b/packages/x-components/src/main.ts
index 60238cec04..97223a1b4c 100644
--- a/packages/x-components/src/main.ts
+++ b/packages/x-components/src/main.ts
@@ -8,7 +8,7 @@ import { XInstaller } from './x-installer/x-installer/x-installer'
 import { FilterEntityFactory } from './x-modules/facets/entities/filter-entity.factory'
 import { SingleSelectModifier } from './x-modules/facets/entities/single-select.modifier'
 import { StickyModifier } from './x-modules/facets/entities/sticky.modifier'
-import './tailwind/index.css'
+import './tailwind/xds.css'
 
 /* eslint-disable ts/no-unsafe-argument */
 
diff --git a/packages/x-components/src/tailwind/index.css b/packages/x-components/src/tailwind/index.css
deleted file mode 100644
index b5c61c9567..0000000000
--- a/packages/x-components/src/tailwind/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/packages/x-components/src/tailwind/plugin-options.ts b/packages/x-components/src/tailwind/plugin-options.ts
deleted file mode 100644
index b1c6ea436a..0000000000
--- a/packages/x-components/src/tailwind/plugin-options.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/packages/x-components/src/tailwind/xds.css b/packages/x-components/src/tailwind/xds.css
new file mode 100644
index 0000000000..0f69f6af94
--- /dev/null
+++ b/packages/x-components/src/tailwind/xds.css
@@ -0,0 +1 @@
+@import '../../node_modules/@empathyco/x-design-system/dist/index.css';
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index ccbaf5bd38..b8dc05cfee 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x x-text-neutral-90">
+  <div class="x xds:text-neutral-90">
     <Tagging :consent="false" />
     <SnippetConfigExtraParams :values="initialExtraParams" />
     <PreselectedFilters />
@@ -7,8 +7,8 @@
     <SnippetCallbacks />
     <ExperienceControls />
     <OpenMainModal>Start</OpenMainModal>
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Test controls</h1>
-    <ul class="x-test-controls x-flex x-flex-col x-gap-16">
+    <h1 class="xds:text-lead-50 xds:text-4xl xds:font-bold xds:leading-normal">Test controls</h1>
+    <ul class="x-test-controls xds:flex xds:flex-col xds:gap-16">
       <li class="x-test-controls__item">
         <label for="searchInput.instant">
           search-input - instant
@@ -110,18 +110,18 @@
         </label>
       </li>
     </ul>
-    <hr class="x-mt-10" />
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Teleport test</h1>
+    <hr class="xds:mt-10" />
+    <h1 class="xds:text-lead-50 xds:text-4xl xds:font-bold xds:leading-normal">Teleport test</h1>
     <div id="teleport-here"></div>
     <MainModal :animation="modalAnimation" :reference-selector="referenceSelector">
-      <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
+      <MultiColumnMaxWidthLayout class="xds:bg-neutral-0">
         <template #header-middle>
           <div
-            class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto"
+            class="xds:flex xds:flex-col xds:gap-16 xds:items-stretch xds:flex-auto"
             :data-test="`main-scroll-${mainScrollDirection}`"
           >
-            <div class="x-input-group x-input-group-lead x-rounded-sm">
-              <div class="x-input x-search-input-placeholder-container x-flex">
+            <div class="x-input-group x-input-group-lead xds:rounded-sm">
+              <div class="x-input x-search-input-placeholder-container xds:flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
                 <SearchInput
                   aria-label="Search for products"
@@ -155,7 +155,7 @@
               </template>
               <RelatedTags
                 :animation="resultsAnimation"
-                class="x-gap-8"
+                class="xds:gap-8"
                 item-class="x-tag-outlined"
               />
               <template #sliding-panel-right-button>
@@ -186,11 +186,11 @@
         </template>
 
         <template #toolbar-body>
-          <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ x.totalResults }} Results</span>
+          <div v-if="x.totalResults > 0" class="xds:flex xds:items-center xds:gap-12">
+            <span class="xds:text-lg">{{ x.totalResults }} Results</span>
             <BaseColumnPickerList
               :model-value="selectedColumns"
-              class="x-gap-4"
+              class="xds:gap-4"
               :columns="columnPickerValues"
               @update:model-value="(col: any) => (selectedColumns = col)"
             >
@@ -233,14 +233,14 @@
           <!--  Redirection  -->
           <Redirection
             v-slot="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
-            class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+            class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
             :delay-in-seconds="5"
           >
             <p>Your search matches a special place in our website. You are being redirected to:</p>
             <a :href="redirection.url" data-test="redirection-link" @click="redirect">
               {{ redirection.url }}
             </a>
-            <div class="x-flex x-gap-32">
+            <div class="xds:flex xds:gap-32">
               <button class="x-button--ghost x-button x-text-neutral-25" @click="abortRedirect">
                 No, I'll stay here
               </button>
@@ -257,22 +257,24 @@
             <!--  No Results Message  -->
             <div
               v-if="x.noResults && !x.fromNoResultsWithFilters"
-              class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+              class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
               data-test="no-results-message"
             >
               <p>
                 There are no results for
-                <span class="x-font-bold">{{ x.query.search }}</span>
+                <span class="xds:font-bold">{{ x.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
             <LocationProvider location="results">
-              <AiOverview class="x-mb-28">
+              <AiOverview class="xds:mb-28">
                 <template #result="{ result }">
                   <Result :result="result" class="x-w-[150px]" />
                 </template>
                 <template #extra-content>
-                  <button class="x-bg-lead-50 x-absolute x-bottom-0 x-right-0 x-translate-y-full">
+                  <button
+                    class="xds:bg-lead-50 xds:absolute xds:bottom-0 xds:right-0 xds:translate-y-full"
+                  >
                     extra content
                   </button>
                 </template>
@@ -280,7 +282,7 @@
             </LocationProvider>
             <template v-if="!x.query.searchBox">
               <!-- Brand Recommendations -->
-              <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
+              <h1 class="xds:mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
                   v-slot="{ queryPreviewInfo, totalResults, results, displayTagging, queryTagging }"
@@ -294,9 +296,9 @@
                     :payload="displayTagging"
                     :event-metadata="{ feature: 'customer', replaceable: false }"
                   >
-                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                    <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                       <QueryPreviewButton
-                        class="x-w-fit x-button-xl x-button-ghost"
+                        class="xds:w-fit x-button-xl x-button-ghost"
                         :query-preview-info="queryPreviewInfo"
                         :metadata="{ feature: 'customer' }"
                       >
@@ -304,7 +306,7 @@
                       </QueryPreviewButton>
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"
@@ -340,7 +342,7 @@
                       >
                         <BaseVariableColumnGrid
                           style="--x-size-min-width-grid-item: 150px"
-                          class="x-gap-12"
+                          class="xds:gap-12"
                           :animation="resultsAnimation"
                           :columns="x.device === 'mobile' ? 2 : 4"
                         >
@@ -363,7 +365,7 @@
                               v-slot="{ results }"
                               :suggestion="nextQueries[0]"
                               :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
-                              class="x-pt-24"
+                              class="xds:pt-24"
                             >
                               <h1 class="x-title2">Others clients have searched</h1>
                               <NextQuery
@@ -371,11 +373,11 @@
                                 :suggestion="nextQueries[0]"
                                 data-test="next-query-preview-name"
                               >
-                                <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                                <span class="xds:font-bold">{{ nextQueries[0].query }}</span>
                               </NextQuery>
-                              <div class="x-mb-24">
+                              <div class="xds:mb-24">
                                 <SlidingPanel :reset-on-content-change="false">
-                                  <div class="x-flex x-flex-row x-gap-8">
+                                  <div class="xds:flex xds:flex-row xds:gap-8">
                                     <Result
                                       v-for="result in results"
                                       :key="result.id"
@@ -389,7 +391,7 @@
                               <NextQuery
                                 :suggestion="nextQueries[0]"
                                 data-test="view-all-results"
-                                class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                                class="x-button x-button-outlined xds:rounded-full xds:mx-auto xds:mt-8 xds:mb-24"
                               >
                                 {{ 'View all results' }}
                               </NextQuery>
@@ -398,10 +400,14 @@
 
                           <template #related-prompts-group>
                             <RelatedPromptsTagList
-                              button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
-                              class="-x-mb-1 x-mt-24 desktop:x-mt-0 x-p-0 x-h-[70px]"
-                              tag-class="x-rounded-xl x-gap-8 x-w-[300px] x-max-w-[400px]"
-                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
+                              button-class="x-button-lead x-button-circle x-button-ghost xds:p-0"
+                              class="xds:mb-1 xds:mt-24 desktop:xds:mt-0 xds:p-0 xds:h-[70px]"
+                              tag-class="xds:rounded-xl xds:gap-8 xds:w-[300px] xds:max-w-[400px]"
+                              :tag-colors="[
+                                'xds:bg-amber-300',
+                                'xds:bg-amber-400',
+                                'xds:bg-amber-500',
+                              ]"
                               scroll-container-class="desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm"
                             >
                               <template #default="{ relatedPrompt, isSelected, onSelect }">
@@ -430,10 +436,10 @@
                                 :queries-preview-info="relatedPromptsQueriesPreviewInfo"
                                 query-feature="related_prompts"
                               >
-                                <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                                <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                                   <QueryPreviewButton
                                     :query-preview-info="queryPreviewInfo"
-                                    class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:x-px-16"
+                                    class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:xds:px-16"
                                   >
                                     {{ queryPreviewInfo.query }}
                                     ({{ totalResults }})
@@ -456,7 +462,7 @@
                                           getToolingAdd2CartTagging(queryPreviewInfo)
                                         "
                                       >
-                                        <div class="x-flex x-gap-8">
+                                        <div class="xds:flex xds:gap-8">
                                           <Result
                                             v-for="result in results"
                                             :key="result.id"
@@ -482,7 +488,7 @@
 
             <!-- Semantic Queries -->
             <SemanticQueries v-slot="{ queries: semanticQueries, findSemanticQuery }">
-              <section class="x-mt-28">
+              <section class="xds:mt-28">
                 <h1 v-if="isAnyQueryLoadedInPreview(semanticQueries)" class="x-title1">
                   Similar Semantic Queries
                 </h1>
@@ -493,7 +499,7 @@
                     query-feature="semantics"
                   >
                     <div
-                      class="x-flex x-flex-col x-gap-8 x-mb-16"
+                      class="xds:flex xds:flex-col xds:gap-8 xds:mb-16"
                       data-test="semantic-query-preview"
                       :data-query="query"
                     >
@@ -509,7 +515,7 @@
                       <!-- eslint-enable vue/no-template-shadow -->
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"
diff --git a/packages/x-components/tailwind.config.ts b/packages/x-components/tailwind.config.ts
deleted file mode 100644
index 07408410c2..0000000000
--- a/packages/x-components/tailwind.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { xTailwindPlugin, oldDsPlugin } from '@empathyco/x-tailwindcss'
-import { Config } from 'tailwindcss'
-import options from './src/tailwind/plugin-options'
-
-export default {
-  content: [
-    './public/index.html',
-    './src/**/*.vue',
-    './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js',
-  ],
-  prefix: 'x-',
-  theme: {
-    extend: {
-      fontFamily: ({ theme }) => theme('x.fontFamily'),
-      fontSize: ({ theme }) => theme('x.fontSize'),
-      spacing: ({ theme }) => theme('x.spacing'),
-      colors: ({ theme }) => theme('x.colors'),
-      screens: ({ theme }) => theme('x.screens'),
-    },
-  },
-  plugins: [xTailwindPlugin(options), oldDsPlugin],
-  important: true,
-} as Config
diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts
index 05d5bcefe0..7e825bb754 100644
--- a/packages/x-components/vite.config.ts
+++ b/packages/x-components/vite.config.ts
@@ -2,6 +2,8 @@ import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import Inspector from 'vite-plugin-vue-inspector'
+// @ts-ignore
+import tailwindcss from '@tailwindcss/vite'
 
 export const vueDocsPlugin = {
   name: 'vue-docs',
@@ -11,7 +13,7 @@ export const vueDocsPlugin = {
 }
 
 export default defineConfig({
-  plugins: [vue(), vueDocsPlugin, Inspector()],
+  plugins: [vue(), tailwindcss(), vueDocsPlugin, Inspector()],
   resolve: {
     alias: {
       vue: resolve(__dirname, 'node_modules/vue'),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af3aa1aa6e..5c9595afd9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,15 +266,18 @@ importers:
       '@cucumber/messages':
         specifier: 32.0.1
         version: 32.0.1
-      '@empathyco/x-tailwindcss':
-        specifier: 2.0.0-alpha.22
-        version: link:../x-tailwindcss
+      '@empathyco/x-design-system':
+        specifier: 0.0.2-alpha.1
+        version: link:../x-design-system
       '@microsoft/api-documenter':
         specifier: 7.28.2
         version: 7.28.2(@types/node@24.10.9)
       '@microsoft/api-extractor':
         specifier: 7.55.2
         version: 7.55.2(@types/node@24.10.9)
+      '@tailwindcss/vite':
+        specifier: 4.1.18
+        version: 4.1.18(vite@6.4.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))
       '@testing-library/jest-dom':
         specifier: 6.9.1
         version: 6.9.1
@@ -296,9 +299,6 @@ importers:
       '@vue/vue3-jest':
         specifier: 29.2.6
         version: 29.2.6(@babel/core@7.28.3)(babel-jest@29.7.0(@babel/core@7.28.3))(jest@29.7.0(@types/node@24.10.9)(ts-node@10.9.2(@types/node@24.10.9)(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
-      autoprefixer:
-        specifier: 10.4.23
-        version: 10.4.23(postcss@8.5.6)
       convert-source-map:
         specifier: 2.0.0
         version: 2.0.0
@@ -317,15 +317,6 @@ importers:
       jest-scss-transform:
         specifier: 1.0.4
         version: 1.0.4(babel-jest@29.7.0(@babel/core@7.28.3))
-      postcss:
-        specifier: 8.5.6
-        version: 8.5.6
-      postcss-dir-pseudo-class:
-        specifier: 7.0.2
-        version: 7.0.2(postcss@8.5.6)
-      postcss-logical:
-        specifier: 4.0.2
-        version: 4.0.2
       rimraf:
         specifier: 3.0.2
         version: 3.0.2
@@ -354,8 +345,8 @@ importers:
         specifier: 2.1.3
         version: 2.1.3
       tailwindcss:
-        specifier: 3.4.19
-        version: 3.4.19(ts-node@10.9.2(@types/node@24.10.9)(typescript@5.9.3))
+        specifier: 4.1.18
+        version: 4.1.18
       ts-jest:
         specifier: 29.4.6
         version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.27.2)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.9)(ts-node@10.9.2(@types/node@24.10.9)(typescript@5.9.3)))(typescript@5.9.3)
@@ -6960,9 +6951,6 @@ packages:
   performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
 
-  picocolors@0.2.1:
-    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -7032,12 +7020,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-dir-pseudo-class@7.0.2:
-    resolution: {integrity: sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.4
-
   postcss-discard-comments@5.1.2:
     resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -7092,10 +7074,6 @@ packages:
       ts-node:
         optional: true
 
-  postcss-logical@4.0.2:
-    resolution: {integrity: sha512-tlX1n19np6/JznvyymZM6SIe0FymD5Ngwcg2j825vNKhADu0p1PTgEmsCjakCbvn78kaIFzYTI32NpgOEwgifQ==}
-    engines: {node: '>=8.0.0'}
-
   postcss-merge-longhand@5.1.7:
     resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -7263,10 +7241,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.9
 
-  postcss@7.0.39:
-    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
-    engines: {node: '>=6.0.0'}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -11613,6 +11587,13 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
+  '@tailwindcss/vite@4.1.18(vite@6.4.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      tailwindcss: 4.1.18
+      vite: 6.4.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2)
+
   '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
@@ -16791,8 +16772,6 @@ snapshots:
 
   performance-now@2.1.0: {}
 
-  picocolors@0.2.1: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -16853,11 +16832,6 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-dir-pseudo-class@7.0.2(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-      postcss-selector-parser: 6.1.2
-
   postcss-discard-comments@5.1.2(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -16901,10 +16875,6 @@ snapshots:
       postcss: 8.5.6
       ts-node: 10.9.2(@types/node@24.10.9)(typescript@5.9.3)
 
-  postcss-logical@4.0.2:
-    dependencies:
-      postcss: 7.0.39
-
   postcss-merge-longhand@5.1.7(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -17062,11 +17032,6 @@ snapshots:
       postcss: 8.5.6
       quote-unquote: 1.0.0
 
-  postcss@7.0.39:
-    dependencies:
-      picocolors: 0.2.1
-      source-map: 0.6.1
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11