diff --git a/package-lock.json b/package-lock.json
index 1bd2036..5471457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@mdx-js/react": "^1.6.22",
         "ahooks": "^3.7.0",
         "clsx": "^1.1.1",
+        "dev-website-tailwind-config": "github:merico-dev/dev-website-tailwind-config",
         "framer-motion": "^6.5.1",
         "postcss-gap-properties": "^3.0.5",
         "prism-react-renderer": "^1.3.1",
@@ -5883,6 +5884,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/dev-website-tailwind-config": {
+      "version": "1.0.0",
+      "resolved": "git+ssh://git@github.com/merico-dev/dev-website-tailwind-config.git#62017898d43897acc108183cf8313e96e8083b25",
+      "license": "ISC"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -18362,6 +18368,10 @@
         "minimist": "^1.2.6"
       }
     },
+    "dev-website-tailwind-config": {
+      "version": "git+ssh://git@github.com/merico-dev/dev-website-tailwind-config.git#62017898d43897acc108183cf8313e96e8083b25",
+      "from": "dev-website-tailwind-config@https://github.com/merico-dev/dev-website-tailwind-config"
+    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
diff --git a/package.json b/package.json
index ee90c5d..891810e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@mdx-js/react": "^1.6.22",
     "ahooks": "^3.7.0",
     "clsx": "^1.1.1",
+    "dev-website-tailwind-config": "github:merico-dev/dev-website-tailwind-config",
     "framer-motion": "^6.5.1",
     "postcss-gap-properties": "^3.0.5",
     "prism-react-renderer": "^1.3.1",
diff --git a/src/components/ContributorPage/contributors-new.tsx b/src/components/ContributorPage/contributors-new.tsx
index d5855fc..c6ca1eb 100644
--- a/src/components/ContributorPage/contributors-new.tsx
+++ b/src/components/ContributorPage/contributors-new.tsx
@@ -28,7 +28,7 @@ export const DocPageSection = styled.div`
 export const Skills = ({ skills }: { skills: string[] }) => {
   return (
     <div className="my-5 self-start">
-      <span className="text-heading3 font-semibold text-neutral-600">
+      <span className="text-heading3stream font-semibold text-neutral-600">
         Skills
       </span>
       <div className="flex flex-row flex-wrap gap-3 mt-3">
@@ -48,10 +48,10 @@ export const Skills = ({ skills }: { skills: string[] }) => {
 function BadgeInfo({ badgeInfo }: { badgeInfo: IBadgeInfo }) {
   return (
     <>
-      <span className="text-primary text-heading2 xl:text-heading1 xl:font-semibold xl:self-start">
+      <span className="text-primary text-heading2stream xl:text-heading1stream xl:font-semibold xl:self-start">
         {badgeInfo.badge.type}
       </span>
-      <span className="text-primary text-heading3 mt-2 xl:font-semibold xl:text-heading2 xl:self-start">
+      <span className="text-primary text-heading3stream mt-2 xl:font-semibold xl:text-heading2stream xl:self-start">
         {badgeInfo.badge.achievement}
       </span>
       <div className="mt-5">{badgeInfo.description}</div>
@@ -88,9 +88,9 @@ const ContributorList = ({
   contributors: IContributorInfo[];
 }) => {
   return (
-    <DocPageSection className="bg-white py-6 overflow-hidden px-4 sm:px-[40px]">
+    <DocPageSection className="bg-white py-6 overflow-hidden px-4 sm2:px-[40px]">
       <TwoRipples color="#F0F4FE" />
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 z-10 max-w-[1248px] mx-auto relative">
+      <div className="grid grid-cols-1 gap-4 sm2:grid-cols-2 xl:grid-cols-3 z-10 max-w-[1248px] mx-auto relative">
         {contributors.map((it) => (
           <ContributorCard key={it.email} info={it} />
         ))}
diff --git a/src/components/ContributorPage/contributors-old.tsx b/src/components/ContributorPage/contributors-old.tsx
index 72c9cb2..a794a6f 100644
--- a/src/components/ContributorPage/contributors-old.tsx
+++ b/src/components/ContributorPage/contributors-old.tsx
@@ -34,7 +34,7 @@ const ContributorTable = ({
   const rows = chain(contributors).chunk(colCount).value();
   return (
     <div className={className}>
-      <span className="text-heading3 font-semibold">{title}</span>
+      <span className="text-heading3stream font-semibold">{title}</span>
       <div className="shadow-lower mt-4 bg-white">
         <table
           ref={tableRef}
@@ -74,7 +74,7 @@ export const ContributorsOld = () => {
     <DocPageSection className="px-4 overflow-hidden">
       <DocPageTweak />
       <div className="mt-5 mb-6 text-neutral-600 m-auto max-w-[1200px] relative z-10">
-        <span className="text-heading2 font-semibold relative">
+        <span className="text-heading2stream font-semibold relative">
           Old Certification
         </span>
         <ContributorTable
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 38a71fb..68eeb87 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -54,21 +54,21 @@ function Feature({ Svg, title, description }) {
       </div>
       <div
         className="text-center lg:text-start
-        sm:w-[550px]
+        sm2:w-[550px]
         lg:w-[300px]
         2xl:w-[380px]
       "
       >
         <span
           className="block text-[16px] leading-[1.25] text-neutral-600 font-semibold
-        lg:text-heading2 dark:text-neutral-invert
+        lg:text-heading2stream dark:text-neutral-invert
         "
         >
           {title}
         </span>
         <p
-          className="mt-1 text-label14 text-neutral-400
-        lg:text-label18 dark:text-neutral-300
+          className="mt-1 text-label14stream text-neutral-400
+        lg:text-label18stream dark:text-neutral-300
         "
         >
           {description}
diff --git a/src/components/discover-devops.js b/src/components/discover-devops.js
index 208b079..0221e40 100644
--- a/src/components/discover-devops.js
+++ b/src/components/discover-devops.js
@@ -10,15 +10,15 @@ export const DiscoverDevops = () => {
     "
     >
       <span
-        className="text-heading3 text-primary font-semibold text-center z-10 mx-4
-      sm:text-heading2
+        className="text-heading3stream text-primary font-semibold text-center z-10 mx-4
+      sm2:text-heading2stream
       lg:text-[54px] lg:text-[1.63]
       "
       >
         Discover DevOps Workflow with DevStream
       </span>
       <Link
-        className="primary-button z-10 self-center mt-3 sm:mt-4 lg:mt-6"
+        className="primary-button z-10 self-center mt-3 sm2:mt-4 lg:mt-6"
         to="https://docs.devstream.io/en/latest/quickstart/"
       >
         Quick Start
diff --git a/src/components/how-dev-stream-works.js b/src/components/how-dev-stream-works.js
index ddf4140..eef9e88 100644
--- a/src/components/how-dev-stream-works.js
+++ b/src/components/how-dev-stream-works.js
@@ -31,7 +31,7 @@ export const HowDevStreamWorks = () => {
       <h3 className="section-title dark:text-primary">How DevStream Works</h3>
       <div
         className="flex flex-col flex-nowrap self-stretch
-        mx-4 sm:mx-6
+        mx-4 sm2:mx-6
         lg:flex-row lg:justify-between lg:items-center lg:max-w-[1600px] lg:self-center
       "
       >
@@ -48,13 +48,13 @@ export const HowDevStreamWorks = () => {
               lg:items-start lg:text-start"
             >
               <span
-                className="text-heading4 text-neutral-600 font-semibold
-              lg:text-heading2 dark:text-neutral-invert
+                className="text-heading4stream text-neutral-600 font-semibold
+              lg:text-heading2stream dark:text-neutral-invert
               "
               >
                 {title}
               </span>
-              <div className="text-label14 text-neutral-400 mt-1 lg:text-label18 dark:text-neutral-300">
+              <div className="text-label14stream text-neutral-400 mt-1 lg:text-label18stream dark:text-neutral-300">
                 {desc}
               </div>
             </div>
@@ -64,7 +64,7 @@ export const HowDevStreamWorks = () => {
             className="text-[14px] leading-[1.2] text-primary
         mt-5
         w-fit self-center lg:self-start hover:no-underline
-        lg:text-heading2
+        lg:text-heading2stream
         hover:text-primary-light
         floating-link
         "
diff --git a/src/components/why-dev-stream.js b/src/components/why-dev-stream.js
index 3bc57a6..5fecf45 100644
--- a/src/components/why-dev-stream.js
+++ b/src/components/why-dev-stream.js
@@ -76,7 +76,7 @@ export const WhyDevStream = () => {
       <div ref={fadeInRef2} className="z-10">
         <MsgBox
           className="mx-4 self-stretch flex flex-col flex-nowrap space-y-3
-      sm:mx-6 sm:space-y-1
+      sm2:mx-6 sm2:space-y-1
       lg:space-y-[4px] lg:max-w-[1086px] lg:self-center
       "
         >
@@ -87,15 +87,15 @@ export const WhyDevStream = () => {
       </div>
       <span
         ref={fadeInRef3}
-        className="text-heading2 text-primary font-semibold mt-[10px] z-10
+        className="text-heading2stream text-primary font-semibold mt-[10px] z-10
       lg:text-[64px] leading-[1.2] lg:mt-3"
       >
         Worry no more.
       </span>
       <span
         ref={fadeInRef4}
-        className="text-heading4 text-neutral-600 font-semibold mt-1 z-10
-      lg:text-heading1 lg:mt-3 dark:text-neutral-300
+        className="text-heading4stream text-neutral-600 font-semibold mt-1 z-10
+      lg:text-heading1stream lg:mt-3 dark:text-neutral-300
       "
       >
         DevStream will get you covered.
@@ -120,7 +120,7 @@ const MsgBox = ({ children, className }) => {
       className={clsx(
         className,
         'bg-white max-w-full rounded-[20px] px-3 py-4 relative mb-3',
-        'sm:px-6',
+        'sm2:px-6',
         'lg:px-8 lg:py-[40px]',
         'drop-shadow-xl shadow-lg shadow-primary-light/10'
       )}
@@ -145,8 +145,8 @@ const Reason = ({ children, className }) => {
     <div
       className={clsx(
         className,
-        'text-neutral-400 text-label14 flex flex-row flex-nowrap justify-start items-center',
-        'lg:text-label18'
+        'text-neutral-400 text-label14stream flex flex-row flex-nowrap justify-start items-center',
+        'lg:text-label18stream'
       )}
     >
       <span className="rounded-full h-[6px] w-[6px] bg-primary block shrink-0 mr-3"></span>
diff --git a/src/css/custom.css b/src/css/custom.css
index 5555e25..1dc3f14 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -40,14 +40,14 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
     @apply bg-primary hover:bg-primary-light;
     @apply flex items-center justify-center w-fit;
     @apply hover:no-underline hover:text-neutral-invert;
-    @apply text-neutral-invert text-[14px] leading-[1.21] font-bold lg:text-heading2;
+    @apply text-neutral-invert text-[14px] leading-[1.21] font-bold lg:text-heading2stream;
     @apply px-4 h-5 lg:px-5 lg:h-7;
     @apply rounded-[4.9px] lg:rounded-[10px];
     @apply shadow-sm shadow-primary/20 lg:shadow-lg lg:shadow-primary/20;
   }
 
   .section-title {
-    @apply text-heading2 mb-5;
+    @apply text-heading2stream mb-5;
     @apply text-neutral-600 font-semibold;
     @apply lg:text-[40px] lg:leading-[1.2] lg:mb-6;
   }
diff --git a/src/pages/index.js b/src/pages/index.js
index 746a32a..71f5041 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -14,10 +14,10 @@ function HomepageHeader() {
     <div
       className="
       pt-5 pb-6 px-4
-      sm:py-4 sm:px-6
+      sm2:py-4 sm2:px-6
       lg:py-6 lg:pr-[120px] lg:pl-[80px]
       flex flex-col
-      sm:flex-row
+      sm2:flex-row
       justify-between items-center
       bg-primary-100
       dark:bg-primary-dark-light
@@ -26,15 +26,15 @@ function HomepageHeader() {
       <div
         className="flex flex-col flex-nowrap items-center justify-start
       space-y-4
-      sm:items-start
+      sm2:items-start
       "
       >
         <div
           className="text-primary
-         font-semibold text-heading2 leading-[1.5]
-         sm:leading-[1.25]
+         font-semibold text-heading2stream leading-[1.5]
+         sm2:leading-[1.25]
          lg:text-[54px] lg:text-[1.44]
-         text-center sm:text-start"
+         text-center sm2:text-start"
         >
           DevStream:
           <br />
@@ -42,9 +42,9 @@ function HomepageHeader() {
         </div>
         <div
           className="text-primary
-        text-label14
+        text-label14stream
         lg:text-[32px] lg:text-[1.25]
-        text-center sm:text-start
+        text-center sm2:text-start
         "
         >
           Choose the best DevOps tools that you love.
@@ -60,7 +60,7 @@ function HomepageHeader() {
       </div>
       <div
         className="h-[200px] w-[200px] mt-3
-      sm:mt-[0] sm:h-[219px] sm:w-[219px]
+      sm2:mt-[0] sm2:h-[219px] sm2:w-[219px]
       lg:h-[540px] lg:w-[540px]
       "
       >
diff --git a/tailwind.config.js b/tailwind.config.js
index ca1f38e..ea32e4e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,60 +1,66 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  corePlugins: {
-    preflight: false,
-  },
-  darkMode: ['class', '[data-theme="dark"]'],
-  theme: {
-    spacing: {
-      1: '8px',
-      2: '12px',
-      3: '16px',
-      4: '24px',
-      5: '32px',
-      6: '48px',
-      7: '64px',
-      8: '80px',
-      9: '96px',
-      10: '112px',
-      11: '128px',
-    },
-    extend: {
-      colors: {
-        primary: '#7497F7',
-        'primary-light': '#99B3F9',
-        'primary-100': '#F0F4FE',
-        'primary-300': '#BDCEFB',
-        'primary-500': '#7497F7',
-        'primary-dark-light': '#2b3137',
-        'primary-dark': '#20232a',
-        neutral: {
-          invert: '#FFFFFF',
-          300: '#d4d4d8',
-          400: '#70727F',
-          600: '#292B3F',
-        },
-      },
-      fontSize: {
-        heading1: ['32px', { lineHeight: 1.25 }],
-        heading2: ['24px', { lineHeight: 1.25 }],
-        heading3: ['20px', { lineHeight: 1.25 }],
-        heading4: ['16px', { lineHeight: 1.25 }],
-        label14: ['14px', { lineHeight: 1.43 }],
-        label18: ['18px', { lineHeight: 1.56 }],
-        body: ['14px', { lineHeight: 1.214 }],
-        "body-sm": ['12px', { lineHeight: 1.25 }]
-      },
-      dropShadow: {
-        xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'],
-      },
-      boxShadow: {
-        sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)',
-        lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)',
-        lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)',
-        high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)'
-      },
-    },
-  },
-  plugins: [],
-};
+
+const {tailwindConfig} = require('dev-website-tailwind-config');
+module.exports = tailwindConfig;
+
+
+// pre config
+// module.exports = {
+//   content: ['./src/**/*.{js,jsx,ts,tsx}'],
+//   corePlugins: {
+//     preflight: false,
+//   },
+//   darkMode: ['class', '[data-theme="dark"]'],
+//   theme: {
+//     spacing: {
+//       1: '8px',
+//       2: '12px',
+//       3: '16px',
+//       4: '24px',
+//       5: '32px',
+//       6: '48px',
+//       7: '64px',
+//       8: '80px',
+//       9: '96px',
+//       10: '112px',
+//       11: '128px',
+//     },
+//     extend: {
+//       colors: {
+//         primary: '#7497F7',
+//         'primary-light': '#99B3F9',
+//         'primary-100': '#F0F4FE',
+//         'primary-300': '#BDCEFB',
+//         'primary-500': '#7497F7',
+//         'primary-dark-light': '#2b3137',
+//         'primary-dark': '#20232a',
+//         neutral: {
+//           invert: '#FFFFFF',
+//           300: '#d4d4d8',
+//           400: '#70727F',
+//           600: '#292B3F',
+//         },
+//       },
+//       fontSize: {
+//         heading1: ['32px', { lineHeight: 1.25 }],
+//         heading2: ['24px', { lineHeight: 1.25 }],
+//         heading3: ['20px', { lineHeight: 1.25 }],
+//         heading4: ['16px', { lineHeight: 1.25 }],
+//         label14: ['14px', { lineHeight: 1.43 }],
+//         label18: ['18px', { lineHeight: 1.56 }],
+//         body: ['14px', { lineHeight: 1.214 }],
+//         "body-sm": ['12px', { lineHeight: 1.25 }]
+//       },
+//       dropShadow: {
+//         xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'],
+//       },
+//       boxShadow: {
+//         sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)',
+//         lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)',
+//         lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)',
+//         high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)'
+//       },
+//     },
+//   },
+//   plugins: [],
+// };