diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
index 1b5fdee..8d15b9b 100644
--- a/components/Editor/EditorControls.tsx
+++ b/components/Editor/EditorControls.tsx
@@ -1,12 +1,13 @@
 import { useRef } from 'react'
 
 import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
-import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 import { OnChangeValue } from 'react-select'
 
 import { Button, Input } from 'components/ui'
 
+import { cn } from '../../util/styles'
+
 import ExampleSelector from './ExampleSelector'
 
 type SelectOption = {
diff --git a/components/Editor/EditorFooter.tsx b/components/Editor/EditorFooter.tsx
index 2901109..39bdd32 100644
--- a/components/Editor/EditorFooter.tsx
+++ b/components/Editor/EditorFooter.tsx
@@ -1,9 +1,8 @@
 import { useContext } from 'react'
 
-import cn from 'classnames'
-
 import { AppUiContext } from '../../context/appUiContext'
 import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import { cn } from '../../util/styles'
 import KBarButton from '../KBar/Button'
 import ThemeSelector from '../ThemeSelector'
 import ToggleFullScreen from '../ToggleFullScreen'
diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx
index be44bca..9d381d3 100644
--- a/components/Editor/ExampleSelector.tsx
+++ b/components/Editor/ExampleSelector.tsx
@@ -1,17 +1,17 @@
-import React, { useId } from 'react'
+import { useId } from 'react'
 
 import { RiFileCodeLine } from '@remixicon/react'
-import cn from 'classnames'
 import Select, {
   components,
   DropdownIndicatorProps,
-  StylesConfig,
   GroupBase,
+  StylesConfig,
 } from 'react-select'
 
+import { cn } from '../../util/styles'
 import { Button } from '../ui'
 
-import { Examples, CairoExampleNames } from './examples'
+import { CairoExampleNames, Examples } from './examples'
 
 type SelectOption = {
   value: number
diff --git a/components/Editor/ExtraColumn.tsx b/components/Editor/ExtraColumn.tsx
index f36a355..bb02da4 100644
--- a/components/Editor/ExtraColumn.tsx
+++ b/components/Editor/ExtraColumn.tsx
@@ -1,11 +1,11 @@
 import { useContext, useState } from 'react'
 
 import { Editor as MonacoEditor, Monaco } from '@monaco-editor/react'
-import cn from 'classnames'
 import { editor } from 'monaco-editor'
 
 import { CodeType } from '../../context/appUiContext'
 import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import { cn } from '../../util/styles'
 
 import Header from './Header'
 import { InstructionsTable } from './InstructionsTable'
diff --git a/components/Editor/InstructionRow.tsx b/components/Editor/InstructionRow.tsx
index 02c6991..3492e6f 100644
--- a/components/Editor/InstructionRow.tsx
+++ b/components/Editor/InstructionRow.tsx
@@ -1,8 +1,7 @@
-import { useState, forwardRef, ForwardedRef, useCallback } from 'react'
-
-import cn from 'classnames'
+import { ForwardedRef, forwardRef, useCallback, useState } from 'react'
 
 import { toHex } from '../../util/string'
+import { cn } from '../../util/styles'
 
 type RowProps = {
   instructionId: number
diff --git a/components/Editor/InstructionsTable.tsx b/components/Editor/InstructionsTable.tsx
index 103bc72..e1fcee1 100644
--- a/components/Editor/InstructionsTable.tsx
+++ b/components/Editor/InstructionsTable.tsx
@@ -1,6 +1,5 @@
 import React, { memo, useCallback, useEffect, useRef } from 'react'
 
-import cn from 'classnames'
 import ReactTooltip from 'react-tooltip'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 import { IInstruction } from 'types'
@@ -9,6 +8,8 @@ import { CodeType } from 'context/appUiContext'
 
 import { SierraVariables } from 'components/Tracer'
 
+import { cn } from '../../util/styles'
+
 const sierraVariableRe = /\[(\d+)\]/
 
 export const InstructionsTable = ({
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 89be2ef..64b8353 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
   useCallback,
   useContext,
   useEffect,
@@ -8,8 +8,7 @@ import React, {
 } from 'react'
 
 import { decode, encode } from '@kunigi/string-compression'
-import { Editor as MonacoEditor, useMonaco, Monaco } from '@monaco-editor/react'
-import cn from 'classnames'
+import { Editor as MonacoEditor, Monaco, useMonaco } from '@monaco-editor/react'
 import copy from 'copy-to-clipboard'
 import { Priority, useRegisterActions } from 'kbar'
 import { editor } from 'monaco-editor'
@@ -31,6 +30,7 @@ import { Examples } from 'components/Editor/examples'
 import { Tracer } from 'components/Tracer'
 
 import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
+import { cn } from '../../util/styles'
 
 import { ArgumentsHelperModal } from './ArgumentsHelperModal'
 import { registerCairoLanguageSupport } from './cairoLangConfig'
diff --git a/components/KBar/ResultItem.tsx b/components/KBar/ResultItem.tsx
index 3a1d31e..daa6527 100644
--- a/components/KBar/ResultItem.tsx
+++ b/components/KBar/ResultItem.tsx
@@ -1,8 +1,9 @@
 import { forwardRef } from 'react'
 
-import cn from 'classnames'
 import { Action } from 'kbar'
 
+import { cn } from '../../util/styles'
+
 type Props = {
   action: Action
   active: boolean
diff --git a/components/NavLink.tsx b/components/NavLink.tsx
index 5a41e9e..8f5606e 100644
--- a/components/NavLink.tsx
+++ b/components/NavLink.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import Link from 'next/link'
 
+import { cn } from '../util/styles'
+
 type Props = {
   href: string
   external?: boolean
diff --git a/components/Tracer/ExecutionStatus.tsx b/components/Tracer/ExecutionStatus.tsx
index 2221270..7d9f98f 100644
--- a/components/Tracer/ExecutionStatus.tsx
+++ b/components/Tracer/ExecutionStatus.tsx
@@ -6,6 +6,7 @@ import {
 import { Priority, useRegisterActions } from 'kbar'
 
 import { Button } from 'components/ui'
+
 import { TraceEntry } from '.'
 
 const ExecutionStatus = ({
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index 94c54cb..0b2ac77 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -1,22 +1,22 @@
 import {
+  memo,
   useContext,
   useEffect,
-  useState,
-  useRef,
   useReducer,
-  memo,
+  useRef,
+  useState,
 } from 'react'
 
-import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 
 import {
-  CairoVMApiContext,
   BreakPoints,
+  CairoVMApiContext,
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 
+import { cn } from '../../util/styles'
 import Console from '../Editor/Console'
 
 import ExecutionStatus from './ExecutionStatus'
@@ -222,28 +222,30 @@ export const Tracer = () => {
         <div className="px-4">
           <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
             <button
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
+              className={cn(
+                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
                 {
                   'border-indigo-600 text-gray-700':
                     selectedConsoleTab === IConsoleTab.DebugInfo,
                   'border-transparent text-gray-500':
                     selectedConsoleTab !== IConsoleTab.DebugInfo,
                 },
-              )}`}
+              )}
               onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
             >
               Debug Info [d]
             </button>
             <button
               onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
+              className={cn(
+                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
                 {
                   'border-indigo-600 text-gray-700':
                     selectedConsoleTab === IConsoleTab.Console,
                   'border-transparent text-gray-500':
                     selectedConsoleTab !== IConsoleTab.Console,
                 },
-              )}`}
+              )}
             >
               Console [e]
             </button>
diff --git a/components/layouts/Home.tsx b/components/layouts/Home.tsx
index a4df1a4..73b09ee 100644
--- a/components/layouts/Home.tsx
+++ b/components/layouts/Home.tsx
@@ -1,7 +1,6 @@
-import { useContext, PropsWithChildren } from 'react'
+import { PropsWithChildren, useContext } from 'react'
 
 import { GoogleAnalytics } from '@next/third-parties/google'
-import cn from 'classnames'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
@@ -9,6 +8,8 @@ import { AppUiContext } from 'context/appUiContext'
 
 import { getAbsoluteURL } from 'util/browser'
 
+import { cn } from '../../util/styles'
+
 import Footer from './Footer'
 import Nav from './Nav'
 
diff --git a/components/layouts/Nav.tsx b/components/layouts/Nav.tsx
index 1393031..9c03524 100644
--- a/components/layouts/Nav.tsx
+++ b/components/layouts/Nav.tsx
@@ -1,4 +1,3 @@
-import cn from 'classnames'
 import Link from 'next/link'
 
 import { GITHUB_REPO_URL } from 'util/constants'
@@ -10,6 +9,8 @@ import ToggleFullScreen from 'components/ToggleFullScreen'
 import ToggleThreeColumnLayout from 'components/ToggleThreeColumnLayout'
 import { Container, Logo } from 'components/ui'
 
+import { cn } from '../../util/styles'
+
 const Nav = () => {
   return (
     <nav
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index b07d5de..c8be201 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import ReactTooltip from 'react-tooltip'
 
+import { cn } from '../../util/styles'
+
 type Props = {
   children: React.ReactNode | string
   href?: string
diff --git a/components/ui/Container.tsx b/components/ui/Container.tsx
index e01bafd..51ed9ee 100644
--- a/components/ui/Container.tsx
+++ b/components/ui/Container.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   children: React.ReactNode
diff --git a/components/ui/Doc.tsx b/components/ui/Doc.tsx
index c74cc2c..f3d3b28 100644
--- a/components/ui/Doc.tsx
+++ b/components/ui/Doc.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import Link from 'next/link'
 
+import { cn } from '../../util/styles'
+
 // The mark identifying an empty table cell, in order to avoid applying styles
 const EMPTY_MARK = '*'
 
diff --git a/components/ui/Hamburger.tsx b/components/ui/Hamburger.tsx
index 52d0387..9fda7ef 100644
--- a/components/ui/Hamburger.tsx
+++ b/components/ui/Hamburger.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   isActive?: boolean
diff --git a/components/ui/Heading.tsx b/components/ui/Heading.tsx
index b66a308..0ca2f2d 100644
--- a/components/ui/Heading.tsx
+++ b/components/ui/Heading.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   children: React.ReactNode
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 8dd3522..c9b84e9 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -1,6 +1,6 @@
-import React, { useState, ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef, useState } from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   searchable?: boolean
diff --git a/components/ui/Message.tsx b/components/ui/Message.tsx
index 8afb3ba..26c3beb 100644
--- a/components/ui/Message.tsx
+++ b/components/ui/Message.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   type: 'success' | 'warning' | 'error'
diff --git a/components/ui/StackBox.tsx b/components/ui/StackBox.tsx
index 68f8943..85d2588 100644
--- a/components/ui/StackBox.tsx
+++ b/components/ui/StackBox.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   value: string
diff --git a/package-lock.json b/package-lock.json
index 1a3c349..16ab767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "assert": "^2.0.0",
         "babel-preset-es2020": "^1.0.2",
         "bn.js": "^5.2.1",
-        "classnames": "^2.3.1",
+        "clsx": "^2.1.0",
         "copy-to-clipboard": "^3.3.1",
         "events": "^3.3.0",
         "gray-matter": "^4.0.3",
@@ -40,6 +40,7 @@
         "react-tooltip": "^4.2.21",
         "react-use-id": "^1.0.0",
         "react-virtuoso": "^4.7.7",
+        "tailwind-merge": "^2.2.2",
         "vercel": "^33.2.0",
         "wrangler": "^3.24.0"
       },
@@ -1717,8 +1718,9 @@
       "license": "MIT"
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.8",
-      "license": "MIT",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -5230,14 +5232,18 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "license": "MIT"
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "10.1.1",
       "license": "MIT"
@@ -11787,6 +11793,18 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.2.tgz",
+      "integrity": "sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "dev": true,
diff --git a/package.json b/package.json
index 90c6897..dfef89c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "assert": "^2.0.0",
     "babel-preset-es2020": "^1.0.2",
     "bn.js": "^5.2.1",
-    "classnames": "^2.3.1",
+    "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",
     "events": "^3.3.0",
     "gray-matter": "^4.0.3",
@@ -48,6 +48,7 @@
     "react-tooltip": "^4.2.21",
     "react-use-id": "^1.0.0",
     "react-virtuoso": "^4.7.7",
+    "tailwind-merge": "^2.2.2",
     "vercel": "^33.2.0",
     "wrangler": "^3.24.0"
   },
diff --git a/util/styles.ts b/util/styles.ts
new file mode 100644
index 0000000..15c3ff6
--- /dev/null
+++ b/util/styles.ts
@@ -0,0 +1,21 @@
+import clsx, { ClassValue } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+import { theme } from '../tailwind.config'
+
+const { fontSize } = theme.extend
+
+// Reference: https://github.com/dcastil/tailwind-merge/blob/v2.2.0/docs/configuration.md
+// extendTailwindMerge to avoid removing ambiguous classNames
+// For example: font-size `text-tiny` and color `text-white`
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': Object.keys(fontSize).map((key) => `text-${key}`),
+    },
+  },
+})
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}