tailwind-integration

src/components/Aside.astro

@@ -32,18 +32,14 @@ const icons = {
 
 <style>
   aside {
-    --aside-bg: var(--color-background-info);
-
-    padding: var(--space-4x);
-    gap: var(--space-4x);
-    background-color: var(--aside-bg);
-    border-radius: var(--border-radius-10);
-    color: var(--color-text-info);
-
     /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
     outline: 1px solid transparent;
 
+    --aside-bg: var(--color-background-info);
+    background-color: var(--aside-bg);
+
     display: flex;
+    @apply p-4 gap-4 rounded-[4px] text-info;
   }
 
   .title {
@@ -53,7 +49,7 @@ const icons = {
   }
 
   aside p {
-    color: var(--color-text-info);
+    @apply text-info;
   }
 
   .icon {
@@ -67,16 +63,16 @@ const icons = {
 
   aside :global(a),
   aside :global(a > code:not([class*="language"])) {
-    color: var(--color-text-link);
+    @apply text-link;
   }
 
   aside :global(p),
   aside.content :global(ul) {
-    color: var(--theme-text);
+    @apply text-text;
   }
 
   :global(.theme-dark) aside :global(code:not([class*="language"])) {
-    color: var(--theme-code-text);
+    @apply text-code-text;
   }
 
   aside :global(pre) {
@@ -102,6 +98,6 @@ const icons = {
   }
 
   .asideContent :global(p + p) {
-    margin-top: var(--space-2x);
+    @apply mt-2;
   }
 </style>

src/components/Footer/Footer.astro

@@ -2,8 +2,8 @@
 // TODO: Replace all footer elements -- INCLUDING SOCIAL MEDIA ICONS!
 ---
 
-<footer class="footer">
-  <div class="footer-grid container">
+<footer class="pt-[82px] bg-gray-800 text-base">
+  <div class="footer-grid grid pb-16 gap-8 container">
     <nav class="footer-col">
       <h3 class="h3 footer-heading">Column 1</h3>
       <ul role="list" class="footer-list">
@@ -110,114 +110,84 @@
 </footer>
 
 <style>
-  .footer {
-    padding: 82px 0 0;
-    background-color: var(--gray-800);
-    font-size: 16px;
-  }
-  .footer-grid {
-    display: grid;
-    padding-bottom: 64px;
-    gap: 32px;
-  }
   .footer-heading {
-    color: var(--white);
-    font-size: 18px;
+    @apply text-white text-[18px];
   }
   .footer-chainlinkreg {
-    white-space: nowrap;
+    @apply whitespace-nowrap;
   }
 
   .footer-list-item {
-    display: flex;
-    margin-bottom: 16px;
-    align-items: center;
+    @apply flex mb-4 items-center;
   }
 
   .footer-list-item.footer-list-item-hidden {
-    display: none;
+    @apply hidden;
   }
 
   .footer-list-item-link {
-    color: #9ea2ab;
+    @apply text-[#9ea2ab];
   }
   .footer-list-item-link:hover {
-    color: white;
+    @apply text-white;
   }
 
   .footer-list-item-social {
-    display: flex;
-    margin-bottom: 16px;
+    @apply flex mb-4;
   }
 
   .footer-list-item-social-icon {
     margin-right: 8px;
   }
 
   .footer-copyright-wrapper {
-    width: 100%;
-    background-color: var(--gray-900);
-    padding: var(--space-8x);
-    font-size: 14px;
+    @apply w-full bg-gray-900 p-8 text-sm;
   }
   .footer-copyright {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-8x);
+    @apply flex flex-col gap-8;
   }
   .footer-registry {
-    flex-wrap: wrap;
-    flex-direction: column;
+    @apply flex-wrap flex-col;
   }
   .footer-privacyandterms {
-    justify-content: space-evenly;
-    gap: var(--space-8x);
+    @apply place-content-evenly gap-8;
+    /* justify-content: space-evenly; */
   }
   .footer-privacyandterms a {
-    color: var(--white);
+    @apply text-white;
   }
 
   @media (min-width: 50em) {
     .footer-grid {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+      @apply grid-cols-6;
     }
     .footer-copyright {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      @apply flex flex-row justify-between;
     }
     .footer-registry {
-      flex-direction: row;
+      @apply flex-row;
     }
     .footer-copyright-logo {
-      margin-right: var(--space-8x);
+      @apply mr-8;
     }
     .footer-chainlinkreg {
-      margin-right: var(--space-4x);
+      @apply mr-4;
     }
   }
 
   /** Utilities */
   .col {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
   }
   .footer-logo-text-hide {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
-    min-width: 0;
-    opacity: 0;
+    @apply absolute left-0 top-0 z-[-1] w-0 h-0 min-w-0 opacity-0;
   }
   .hidden-sm {
-    display: none;
+    @apply hidden;
   }
   @media (min-width: 50em) {
     .hidden-sm {
-      display: block;
+      @apply block;
     }
   }
 </style>

src/components/Footer/NewsletterCTA.css

@@ -1,85 +1,50 @@
 .newsletter-cta {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--space-16x) var(--space-8x);
-  background-image: url(/images/newsletter_bg.svg);
-  background-position: center;
-  background-size: cover;
-}
-
-.newsletter-cta .hiddenLabel {
-  overflow: hidden;
-  display: none;
-  width: var(--space-0x);
-  height: var(--space-0x);
-  text-indent: 100%;
-  white-space: nowrap;
+  @apply flex flex-col items-center py-16 px-8 bg-center bg-cover bg-[url('/images/newsletter_bg.svg')];
 }
 
 .newsletter-cta :is(h2) {
-  margin-bottom: var(--space-12x);
+  @apply mb-12;
 }
 
 .newsletter-cta .w-inline-block {
-  max-width: 100%;
-  display: inline-block;
+  @apply max-w-full inline-block;
 }
 
 .form-subscribe {
-  max-width: 550px;
-  width: 100%;
+  @apply max-w-[550px] w-full;
 }
 
 .form-subscribe-field-wrapper {
-  display: flex;
-  gap: var(--space-2x);
-  flex-direction: column;
+  @apply flex gap-2 flex-col;
 }
 
 @media (min-width: 50em) {
   .form-subscribe-field-wrapper {
-    flex-direction: row;
-
-    gap: var(--space-4x);
+    @apply flex-row gap-4;
   }
 }
 .newsletter-cta .cta-subscribe-input {
-  width: 100%;
-  height: 56px;
-  max-height: 56px;
-  padding-right: 24px;
-  padding-left: 24px;
-  border-style: solid;
-  border-width: var(--border-width-secondary);
-  border-color: var(--gray-300);
-  border-radius: var(--border-radius-primary);
-  box-shadow: 0 12px 32px -12px rgb(12 22 44 / 32%);
+  @apply w-full h-[56px] max-h-[56px] px-6 border-solid border-2 border-gray-300 rounded-primary shadow-[0_12px_32px_-12px_rgba(12,22,44,0.32)];
 }
 .newsletter-cta .cta-subscribe-input::placeholder {
-  font-style: italic;
+  @apply italic;
 }
 
 /* #subscribe-button {
   width: 100%;
 } */
 .subscribe-form-success-social {
-  margin-right: 4px;
-  margin-left: 4px;
+  @apply mx-1;
   transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
 }
 .subscribe-success-social {
-  margin-top: var(--space-2x);
-  display: flex;
-  justify-content: center;
+  @apply mt-2 flex justify-center;
 }
 
 .subscribe-form-success-social:hover {
   transform: translate(0px, -4px);
 }
 
 .newsletter-cta .form-subscribe-checkbox {
-  display: block;
-  margin-top: var(--space-4x);
-  cursor: pointer;
+  @apply block mt-4 cursor-pointer;
 }

src/components/Footer/NewsletterCTA.tsx

@@ -8,7 +8,7 @@ export type NewsletterCTAProps = {
 }
 export const NewsletterCTA = ({ title = "Stay updated on the latest Scroll news" }: NewsletterCTAProps) => {
   return (
-    <section className={"newsletter-cta"}>
+    <section className="newsletter-cta">
       <h2 className="cta-subscribe-h1 heading-600">{title}</h2>
       <NewsletterSignupForm />
     </section>

src/components/Footer/NewsletterSignupForm.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "preact/hooks"
 import "./NewsletterCTA.css"
-import button from "../../styles/cl-design-system/button.module.css"
+import button from "../../styles/design-system/button.module.css"
 import { clsx } from "~/lib"
 import jsonp from "jsonp"
 import toQueryString from "to-querystring"
@@ -54,7 +54,7 @@ export const NewsletterSignupForm = () => {
           onSubmit={onSubmit}
         >
           <div className="form-subscribe-field-wrapper">
-            <label htmlFor="Email" className="hiddenLabel ">
+            <label htmlFor="Email" className="overflow-hidden hidden w-0 h-0 indent-[100%] whitespace-nowrap">
               Email Address
             </label>
             <input

src/components/HeadCommon.astro

@@ -5,7 +5,7 @@ import "../styles/migrated.css"
 import "../styles/prism-darcula.css"
 import "../styles/copy-to-clipboard.css"
 
-import "../styles/cl-design-system/global-styles.css"
+import "../styles/design-system/global-styles.css"
 ---
 
 <!-- Global Metadata -->

src/components/Header/AstroLogo.astro

@@ -5,10 +5,10 @@ const { size } = Astro.props
 <svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
   <style>
     #flame {
-      fill: var(--theme-text-accent);
+      @apply fill-accent;
     }
     #a {
-      fill: var(--theme-text-accent);
+      @apply fill-accent;
     }
   </style>
   <title>Logo</title>