feat: add the reference of tailwindConfig

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",

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} />
         ))}

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

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}

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

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
         "

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>

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;
   }

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,25 +26,25 @@ 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 />
           Your DevOps Toolchain Manager
         </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]
       "
       >