Migrate to tailwind v4

package.json

@@ -22,6 +22,15 @@
   "author": "",
   "license": "ISC",
   "packageManager": "[email protected]+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
+  "pnpm": {
+    "overrides": {
+      "sharp": "^0.34.4"
+    }
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "tailwindcss": "^4.1.17"
+  },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@typescript-eslint/parser": "^8.46.2",

packages/delta-site/package.json

@@ -18,7 +18,6 @@
   "dependencies": {
     "@astrojs/netlify": "^6.5.13",
     "@astrojs/rss": "^4.0.12",
-    "@astrojs/tailwind": "^6.0.2",
     "@fontsource-variable/source-code-pro": "^5.2.7",
     "@fontsource/source-sans-pro": "^5.2.5",
     "astro": "^5.14.7",

packages/delta-site/src/components/AnnouncementSection.astro

@@ -15,7 +15,7 @@ const { title, description, url } = Astro.props;
 <Section padding="sm" className="section">
   <Typography variant="prose">
     <p class="text">
-      <a href={url}>
+      <a href={url} class="announcement-link">
         <strong>{title}:</strong>
         {description}
         <Icon icon="more" alt="" className="icon" />
@@ -25,10 +25,10 @@ const { title, description, url } = Astro.props;
 </Section>
 <style>
   .section {
-    background-color: theme(colors.accent);
+    background-color: var(--color-accent);
     text-align: center;
 
-    a {
+    .announcement-link {
       color: #000;
       text-decoration: none;
       display: inline-block;

packages/delta-site/src/components/BookDownloadSection/BookDownloadSection.astro

@@ -21,7 +21,7 @@ import downloadArrowImg from "./download-arrow.png";
       <Button
         href="/pdfs/dldg_databricks.pdf"
         isDownload
-        className="download-cta"
+        className="download-cta white-button"
         >Download <Image src={downloadArrowImg} alt="" loading="lazy" /></Button
       >
     </Typography>
@@ -33,11 +33,11 @@ import downloadArrowImg from "./download-arrow.png";
   }
 
   .download-wrap {
-    background: theme(colors.bgDarkBlue);
+    background: var(--color-bg-dark-blue);
     display: flex;
     justify-content: center;
     align-items: center;
-    color: theme(colors.darkColor);
+    color: var(--color-dark-color);
     padding: 48px 30px;
     border-radius: 5px;
     flex-direction: column;
@@ -58,18 +58,18 @@ import downloadArrowImg from "./download-arrow.png";
   .download-text-item p {
     font-size: 1.4rem;
     margin-bottom: 1.5rem;
-    line-height: theme(lineHeight.header);
+    line-height: var(--line-height-header);
     opacity: 0.8;
   }
 
   .download-cta {
     display: inline-flex;
     align-items: center;
-    gap: theme(spacing.xs);
+    gap: var(--spacing-xs);
     margin: 0 auto;
   }
 
-  @media screen(md) {
+  @media (min-width: 768px) {
     .download-wrap {
       flex-direction: row;
     }

packages/delta-site/src/components/Community/ArticleVideoSection.astro

@@ -12,7 +12,7 @@ import Typography from "delta-theme/components/Typography.astro";
   className="bg-white"
 >
   <Typography variant="prose">
-    <div class="mb-lg lg:float-right lg:ml-md">
+    <div class="mb-6 lg:float-right lg:ml-4">
       <iframe
         width="560"
         height="315"
@@ -24,7 +24,7 @@ import Typography from "delta-theme/components/Typography.astro";
         allowfullscreen
         class="max-w-full mx-auto"></iframe>
     </div>
-    <h4 class="mb-xs">FLORIAN VALEYE</h4>
+    <h4 class="mb-2">FLORIAN VALEYE</h4>
     <h6 class="mt-none">STAFF DATA ENGINEER, BACK MARKET</h6>
     <p>
       This conversation from the Open Source Summit in Spain provides valuable

packages/delta-site/src/components/Community/ChartSection/ChartSection.astro

@@ -6,7 +6,10 @@ import chartImage from "./chart.png";
 ---
 
 <Section padding="xl">
-  <Typography variant="h4" className="font-normal mb-xl text-center">
+  <Typography
+    variant="h4"
+    className="chart-section-text font-normal text-center"
+  >
     Because of the contributions from our amazing community, Delta Lake is now
     up to 20M monthly downloads! We&rsquo;re proud of the progress this project
     is making and invite you to get involved.{" "}
@@ -18,3 +21,25 @@ import chartImage from "./chart.png";
     class="mx-auto"
   />
 </Section>
+
+<style>
+  .chart-section-text {
+    font-weight: 400;
+    line-height: 1.2;
+    color: rgb(0, 38, 56);
+    font-size: 1.5625rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.875rem;
+    text-align: center;
+  }
+
+  .chart-section-text a {
+    color: var(--color-link);
+    text-decoration: underline;
+  }
+
+  .chart-section-text a:hover {
+    text-decoration: underline;
+    color: var(--color-link);
+  }
+</style>

packages/delta-site/src/components/Community/ContributeSection.astro

@@ -61,22 +61,22 @@ const repos = [
       Below are a few great ways to get started to contribute.
     </Typography>
   </Fragment>
-  <Grid columns={{ xs: 1, md: 2, lg: 3 }} className="gap-lg mb-xl">
+  <Grid columns={{ xs: 1, md: 2, lg: 3 }} className="gap-6 mb-8">
     {
       repos.map((repo) => (
-        <Typography variant="prose" className="bg-white p-md">
+        <Typography variant="prose" className="bg-white p-4">
           <div class="text-[35px] text-center">
-            <Icon icon="github" alt="Github" className="mb-sm" />
+            <Icon icon="github" alt="Github" className="mb-3" />
           </div>
-          <h3 class="font-normal mt-0 mb-xs">
+          <h3 class="font-normal mt-0 mb-2">
             <a href={repo.url} class="text-inherit no-underline">
               {repo.name}
             </a>
           </h3>
-          <p class="p2 mb-sm">
+          <p class="p2 mb-3">
             {repo.contributors} contributors | {repo.orgs} organizations
           </p>
-          <p class="mb-md">{repo.description}</p>
+          <p class="mb-4">{repo.description}</p>
           <p>
             <a href={`${repo.url}/issues/new/choose`}>Report an issue</a>
             <br />
@@ -88,7 +88,7 @@ const repos = [
   </Grid>
   <Typography
     variant="prose"
-    className="mb-xl md:text-center max-w-screen-lg mx-auto"
+    className="mb-8 md:text-center max-w-(--breakpoint-lg) mx-auto"
   >
     <p>
       Refer to the
@@ -128,7 +128,7 @@ const repos = [
     className="bg-[#cdd9f4]"
     isHeaderCentered
   >
-    <Grid columns={{ xs: 1, md: 2 }} className="mb-xl">
+    <Grid columns={{ xs: 1, md: 2 }} className="mb-8">
       <Typography variant="p">
         Delta Lake is an independent open-source project and not controlled by
         any single company. To emphasize this we joined the Delta Lake Project

packages/delta-site/src/components/Community/HeroSection.astro

@@ -11,7 +11,7 @@ import { SocialTiles } from "../SocialTiles";
   isHeaderCentered
 >
   <Fragment slot="subtitle">
-    <Typography variant="p">
+    <Typography variant="p" className="hero-subtitle-text">
       Delta Lake is supported by more than 190 developers from over 70
       organizations across multiple repositories.
       <br />

packages/delta-site/src/components/Community/MaintainersSection.astro

@@ -128,7 +128,7 @@ const maintainers = [
       </p>
     </Typography>
   </Fragment>
-  <Typography variant="table" className="mx-auto max-w-screen-md">
+  <Typography variant="table" className="mx-auto max-w-(--breakpoint-md)">
     <thead>
       <tr>
         <th>Name</th>

packages/delta-site/src/components/Community/TwitchSection/TwitchSection.astro

@@ -14,7 +14,7 @@ import profileImg from "./Tyler-Croy-min.jpg";
       md: ["60px", "auto", "60px"],
       xl: ["120px", "auto", "120px"],
     }}
-    className="gap-xl xl:items-center xl:justify-between"
+    className="gap-8 xl:items-center xl:justify-between"
   >
     <a href="https://www.twitch.tv/agentdero" target="_blank">
       <Image
@@ -25,7 +25,7 @@ import profileImg from "./Tyler-Croy-min.jpg";
         class="max-xl:w-[60px]"
       />
     </a>
-    <Typography variant="prose">
+    <Typography variant="prose" className="twitch-section-text">
       <h3 class="font-normal">
         Watch Delta Rust code development LIVE on Twitch.tv!
       </h3>
@@ -50,3 +50,36 @@ import profileImg from "./Tyler-Croy-min.jpg";
     </a>
   </Grid>
 </Section>
+
+<style>
+  .twitch-section-text {
+    color: rgb(0, 38, 56);
+    font-weight: 400;
+    line-height: 1.5;
+    font-family: var(--font-family-default);
+  }
+
+  .twitch-section-text h3 {
+    font-weight: 400;
+    line-height: 1.5;
+    color: rgb(0, 38, 56);
+    margin-top: 0;
+  }
+
+  .twitch-section-text p {
+    font-weight: 400;
+    line-height: 1.5;
+    color: rgb(0, 38, 56);
+    font-size: var(--font-size-h4);
+  }
+
+  .twitch-section-text p a {
+    color: var(--color-link);
+    text-decoration: underline;
+  }
+
+  .twitch-section-text p a:hover {
+    text-decoration: underline;
+    color: var(--color-link);
+  }
+</style>

packages/delta-site/src/components/ContributorsSection/ContributorsSection.astro

@@ -207,8 +207,8 @@ const { className } = Astro.props;
 </Section>
 <style>
   .grid {
-    column-gap: theme(spacing.lg);
-    row-gap: theme(spacing.xxl);
+    column-gap: var(--spacing-lg);
+    row-gap: var(--spacing-xxl);
   }
 
   .contributor {

packages/delta-site/src/components/Home/DiagramSection/DiagramSection.astro

@@ -27,7 +27,7 @@ const offsetCssVars = mapKeys(offsets, (size) => `offset-${size}`);
 <style define:vars={offsetCssVars}>
   .section {
     padding-top: 0;
-    padding-bottom: theme(spacing.xxxl);
+    padding-bottom: var(--spacing-xxxl);
   }
 
   .diagram-container {
@@ -36,25 +36,25 @@ const offsetCssVars = mapKeys(offsets, (size) => `offset-${size}`);
     margin-right: auto;
   }
 
-  @media screen(sm) {
+  @media (min-width: 576px) {
     .diagram-container {
       margin-top: calc(-1 * var(--offset-sm));
     }
   }
 
-  @media screen(md) {
+  @media (min-width: 768px) {
     .diagram-container {
       margin-top: calc(-1 * var(--offset-md));
     }
   }
 
-  @media screen(lg) {
+  @media (min-width: 992px) {
     .diagram-container {
       margin-top: calc(-1 * var(--offset-lg));
     }
   }
 
-  @media screen(xl) {
+  @media (min-width: 1200px) {
     .diagram-container {
       margin-top: calc(-1 * var(--offset-xl));
     }