diff --git a/.changeset/slimy-rings-remain.md b/.changeset/slimy-rings-remain.md
new file mode 100644
index 0000000000..6d821cc54d
--- /dev/null
+++ b/.changeset/slimy-rings-remain.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-typography-overflow': major
+'@toptal/picasso': patch
+---
+
+### TypographyOverflow
+
+- migrate to TailwindCSS, `material-ui@4` is no longer required for this package
+- require `@toptal/picasso-tailwind` and `@toptal/picasso-tailwind-merge` to be installed
diff --git a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
index 8fd7ab3fcd..8a0bc9c067 100644
--- a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -32,7 +32,7 @@ exports[`FileList renders 1`] = `
               </svg>
             </div>
             <p
-              class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis overflow-hidden TypographyOverflow-wrapper !block !whitespace-nowrap FileListItem-label"
+              class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
             >
               user-profile-picture.png
             </p>
diff --git a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
index abaac872a3..55044b8a39 100644
--- a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -29,7 +29,7 @@ exports[`FileListItem renders 1`] = `
             </svg>
           </div>
           <p
-            class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis overflow-hidden TypographyOverflow-wrapper !block !whitespace-nowrap FileListItem-label"
+            class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
           >
             user-profile-picture.png
           </p>
diff --git a/packages/base/Step/src/Step/Step.tsx b/packages/base/Step/src/Step/Step.tsx
index d45003192c..75b37cd4f9 100644
--- a/packages/base/Step/src/Step/Step.tsx
+++ b/packages/base/Step/src/Step/Step.tsx
@@ -73,9 +73,7 @@ export const Step = (props: Props) => {
       {expand ? (
         withOverflowEllipsis ? (
           <span className='grid'>
-            <TypographyOverflow className='flex'>
-              {labelElement}
-            </TypographyOverflow>
+            <TypographyOverflow>{labelElement}</TypographyOverflow>
           </span>
         ) : (
           labelElement
diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
index 4e0e328504..933f582acc 100644
--- a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -162,7 +162,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 1
               </div>
@@ -180,7 +180,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 2
               </div>
diff --git a/packages/base/TypographyOverflow/package.json b/packages/base/TypographyOverflow/package.json
index a655b25c52..90a589b5cf 100644
--- a/packages/base/TypographyOverflow/package.json
+++ b/packages/base/TypographyOverflow/package.json
@@ -24,20 +24,20 @@
   "dependencies": {
     "@toptal/picasso-tooltip": "1.1.5",
     "@toptal/picasso-typography": "4.0.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "tailwindcss": ">=3",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
     "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0",
     "styled-components": "^6.1.1"
   },
   "exports": {
diff --git a/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx b/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx
index 4bc5c7e081..79de85ea8b 100644
--- a/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx
+++ b/packages/base/TypographyOverflow/src/TypographyOverflow/TypographyOverflow.tsx
@@ -1,16 +1,12 @@
-import cx from 'classnames'
 import type { ReactNode } from 'react'
 import React, { useCallback, useState } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Tooltip } from '@toptal/picasso-tooltip'
 import { Typography } from '@toptal/picasso-typography'
 import { isOverflown } from '@toptal/picasso-utils'
 import type { TypographyProps } from '@toptal/picasso-typography'
 import type { DelayType, PlacementType } from '@toptal/picasso-tooltip'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps, TypographyProps {
   /** A typography which can possibly overflow */
@@ -27,10 +23,6 @@ export interface Props extends BaseProps, TypographyProps {
   placement?: PlacementType
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'TypographyOverflow',
-})
-
 export const TypographyOverflow = (props: Props) => {
   const {
     children,
@@ -46,7 +38,6 @@ export const TypographyOverflow = (props: Props) => {
     ...rest
   } = props
 
-  const classes = useStyles(props)
   const [isTooltipActive, setIsTooltipActive] = useState(false)
   const [isTooltipOpened, setIsTooltipOpened] = useState(false)
   const [isTooltipAnimating, setIsTooltipAnimating] = useState(false)
@@ -115,9 +106,12 @@ export const TypographyOverflow = (props: Props) => {
     <Typography
       {...rest}
       style={extendedStyle}
-      className={cx(
-        classes.wrapper,
-        isMultiline ? classes.multiLine : '!block !whitespace-nowrap',
+      noWrap={!isMultiline}
+      className={twMerge(
+        '[-webkit-box-orient:vertical] overflow-hidden text-ellipsis pr-[0.9px]',
+        isMultiline
+          ? '[display:-webkit-box] break-words ![white-space:initial]'
+          : 'block',
         className
       )}
       onClick={handleClick}
@@ -149,8 +143,4 @@ export const TypographyOverflow = (props: Props) => {
 
 TypographyOverflow.displayName = 'TypographyOverflow'
 
-TypographyOverflow.defaultProps = {
-  noWrap: true,
-}
-
 export default TypographyOverflow
diff --git a/packages/base/TypographyOverflow/src/TypographyOverflow/styles.ts b/packages/base/TypographyOverflow/src/TypographyOverflow/styles.ts
deleted file mode 100644
index 290eeeb292..0000000000
--- a/packages/base/TypographyOverflow/src/TypographyOverflow/styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    multiLine: {
-      display: '-webkit-box',
-      whiteSpace: 'initial !important' as 'initial',
-      wordBreak: 'break-word',
-    },
-    wrapper: {
-      '-webkit-box-orient': 'vertical',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      /**
-       * Workaround for `textOverflow: ellipsis`.
-       * Browser can show ellipsis at the end, even if it's not required -
-       * it's possible if the text has the very same width as the container
-       * (ellipsis width will be the same as the width of the text hidden by these ellipsis).
-       * It could be also affected by the font itself, when it has wider render bouncing borders.
-       * So to be sure, that text container in slightly wider than parent,
-       * we have to to add some super-minor space at the end.
-       */
-      paddingRight: '0.9px',
-    },
-  })
diff --git a/packages/base/TypographyOverflow/tsconfig.json b/packages/base/TypographyOverflow/tsconfig.json
index 1390e8de82..856abd0784 100644
--- a/packages/base/TypographyOverflow/tsconfig.json
+++ b/packages/base/TypographyOverflow/tsconfig.json
@@ -3,6 +3,8 @@
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
   "references": [
+    { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../Tooltip" },
     { "path": "../Typography" },
     { "path": "../Utils" }