Tailwind 3.4.1

components/Banner/Banner.styles.ts

@@ -1,6 +1,6 @@
 export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
 export const contentWrapper = 'lg:rs-pr-9 ml-0';
 export const heading = '2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200';
-export const body = 'max-w-[50ch] rs-mb-3 children:children:leading-snug';
+export const body = 'max-w-[50ch] rs-mb-3 *:*:leading-snug';
 export const imageWrapper = 'self-end lg:self-start shrink-0';
 export const image = 'rs-mt-3 lg:mt-0 w-250 xl:w-[36rem]';

components/BlurryPoster/BlurryPoster.styles.tsx

@@ -78,7 +78,7 @@ export const customHeading = (
   imageOnLeft?: boolean,
   headingFont?: 'druk' | 'serif',
   isTwoCol?: boolean,
-) => cnb('flex flex-wrap gap-x-[0.6em] md:gap-x-[1em] items-center mb-0 -mt-02em md:-mt-05em lg:-mt-08em children:inline-block', {
+) => cnb('flex flex-wrap gap-x-[0.6em] md:gap-x-[1em] items-center mb-0 -mt-02em md:-mt-05em lg:-mt-08em *:inline-block', {
   '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk' && isTwoCol,
 });
 export const customHeadingText = (font?: 'druk' | 'serif', isSmallHeading?: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
@@ -92,7 +92,7 @@ export const customHeadingText = (font?: 'druk' | 'serif', isSmallHeading?: bool
 export const bodyWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('cc w-full', {
   '3xl:pr-[calc(100%-750px)] lg:pl-40 2xl:pl-60': imageOnLeft && isTwoCol,
   '3xl:pl-[calc(100%-750px)] lg:pr-40 2xl:pr-60': !imageOnLeft && isTwoCol,
-  'children:max-w-[50ch]': !isTwoCol,
+  '*:max-w-[50ch]': !isTwoCol,
 });
 
 export const cta = 'rs-mt-4';

components/Bracket/Bracket.styles.ts

@@ -1,7 +1,7 @@
 import { cnb } from 'cnbuilder';
 
 // Bracket Curve styles
-export const root = 'children:border-current backface-hidden';
+export const root = '*:border-current backface-hidden';
 
 export type CornerType = 'tl' | 'bl' | 'tr' | 'br';
 

components/ChangemakerCard/ChangemakerCard.styles.ts

@@ -6,7 +6,7 @@ export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2';
 export const info = 'rs-px-1 pb-150 absolute w-full h-full bottom-0 left-0 mb-0';
 export const heading = 'mb-02em mt-auto';
 
-export const cardContent = 'absolute w-full h-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker children:children:children:!mb-1em';
+export const cardContent = 'absolute w-full h-full top-0 left-0 px-20 py-30 3xl:py-48 3xl:px-36 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 gc-changemaker *:*:*:!mb-1em';
 
 export const button = 'group absolute w-full h-full top-0 left-0';
 export const icon = 'absolute bottom-40 right-36 text-white w-65 h-65 border-2 border-white rounded-full p-16 group-hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform';

components/EmbedMedia/EmbedMedia.styles.ts

@@ -1,2 +1,2 @@
-export const mediaWrapper = 'children:!w-full children:!h-full';
-export const caption = 'children:children:leading-display caption mt-1em max-w-prose-wide';
+export const mediaWrapper = '*:!w-full *:!h-full';
+export const caption = '*:*:leading-display caption mt-1em max-w-prose-wide';

components/FeaturedStories/FeatureMasonry.tsx

@@ -56,7 +56,7 @@ export const FeatureMasonry = ({
           <div className="absolute top-0 left-0 w-full h-full backdrop-blur-sm" />
           <EmbedMedia
             mediaUrl={audioUrl}
-            className="relative z-10 rs-py-6 children:w-4/5 children:mx-auto lg:children:children:aspect-w-2 lg:children:children:aspect-h-1 xl:children:children:aspect-w-4 xl:children:children:aspect-h-1"
+            className="relative z-10 rs-py-6 *:w-4/5 *:mx-auto lg:*:*:aspect-w-2 lg:*:*:aspect-h-1 xl:*:*:aspect-w-4 xl:*:*:aspect-h-1"
           />
         </FlexBox>
         <FlexBox

components/Grid/Grid.styles.ts

@@ -50,7 +50,7 @@ export const gridNumCols = {
   },
 };
 
-export const rtl = '[direction:rtl] children:[direction:ltr]';
+export const rtl = '[direction:rtl] *:[direction:ltr]';
 
 export const gridGaps = {
   default: 'grid-gap',

components/Grid/Grid.tsx

@@ -83,7 +83,7 @@ export const Grid = ({
       mt ? marginTops[mt] : '',
       mb ? marginBottoms[mb] : '',
       my ? marginVerticals[my] : '',
-      isList ? 'list-unstyled children:mb-0' : '',
+      isList ? 'list-unstyled *:mb-0' : '',
       className,
     )}
   >

components/Hero/BasicHeroMvp.tsx

@@ -39,7 +39,7 @@ export const BasicHeroMvp = ({
         />
       </>
     )}
-    <Container className="children:mx-auto">
+    <Container className="*:mx-auto">
       <Heading
         as="h1"
         font="serif"

components/Hero/StoryHeroMvp.styles.ts

@@ -27,4 +27,4 @@ export const image = (renderTwoImages: boolean) => cnb(
 );
 export const mobileImage = 'w-full h-full lg:hidden';
 export const captionWrapper = 'mt-06em';
-export const caption = 'caption children:leading-display mt-08em max-w-prose-wide';
+export const caption = 'caption *:leading-display mt-08em max-w-prose-wide';

components/Homepage/IdealFellow.tsx

@@ -31,7 +31,7 @@ export const IdealFellow = () => {
         <Link href="/stories/poc-solve-for-now" className="no-underline stretched-link">
           <Heading color="white" weight="normal" className="decoration-4 decoration-transparent underline-offset-8 group-hocus-within:underline  group-hocus-within:decoration-digital-red-light transition-colors">
             Untangling the web of racial inequality
-            <HeroIcon icon="arrow-right" noBaseStyle className="inline-block group-hocus-within:translate-x-[0.2em] bg-digital-red rounded-full p-12 ml-05em children:stroke-[2px] w-08em" />
+            <HeroIcon icon="arrow-right" noBaseStyle className="inline-block group-hocus-within:translate-x-[0.2em] bg-digital-red rounded-full p-12 ml-05em *:stroke-[2px] w-08em" />
           </Heading>
         </Link>
         <Text variant="card" color="white">

components/Homepage/Intro.tsx

@@ -40,7 +40,7 @@ export const Intro = ({ text }: IntroProps) => {
             style={{ x: prefersReduceMotion ? '0' : bracketPosition, willChange }}
           >
             <Bracket
-              className="w-[10vw] 2xl:w-150 h-full children:!text-lime"
+              className="w-[10vw] 2xl:w-150 h-full *:!text-lime"
               curveClassName="h-[7vw] 2xl:h-[10.5rem]"
             />
           </m.div>
@@ -58,7 +58,7 @@ export const Intro = ({ text }: IntroProps) => {
           >
             <Bracket
               isClose
-              className="w-[10vw] 2xl:w-150 h-full children:!text-lavender"
+              className="w-[10vw] 2xl:w-150 h-full *:!text-lavender"
               curveClassName="h-[7vw] 2xl:h-[10.5rem]"
             />
           </m.div>

components/Homepage/ThemeSection.tsx

@@ -130,7 +130,7 @@ export const ThemeSection = ({
             </Paragraph>
           </div>
         </AnimateInView>
-        <div className={cnb('sr-only focus-within:not-sr-only w-fit children:mx-auto', !shouldAnimate ? 'hidden' : '')}>
+        <div className={cnb('sr-only focus-within:not-sr-only w-fit *:mx-auto', !shouldAnimate ? 'hidden' : '')}>
           <CtaButton onClick={() => setShouldAnimate(false)}>Reveal themes visually</CtaButton>
         </div>
         {/* This grid contains the 4 animated lines behind the theme cards */}

components/LocalFooter/LocalFooter.tsx

@@ -22,7 +22,7 @@ export const LocalFooter = () => (
             (650) 724-0627<br />
           </Text>
           <Text className="rs-mt-0 rs-mb-3">Tax ID: 94-1156365</Text>
-          <ul className="list-unstyled children:mb-04em">
+          <ul className="list-unstyled *:mb-04em">
             <li><CtaLink color="black" icon="arrow-right" href="contact-us" className="inline-block">Contact us</CtaLink></li>
             <li><CtaLink color="black" icon="arrow-right" href="faq" className="inline-block">FAQs</CtaLink></li>
           </ul>
@@ -60,7 +60,7 @@ export const LocalFooter = () => (
           <Heading as="h3" size={1} font="druk-wide" uppercase className="rs-mb-0">
             Initiatives
           </Heading>
-          <ul className="list-unstyled children:mb-06em">
+          <ul className="list-unstyled *:mb-06em">
             {Object.values(initiatives).map((initiative) => (
               <li key={initiative.name}>
                 <CtaLink color="black" href={initiative.path} className="inline-block">{initiative.name}</CtaLink>
@@ -74,7 +74,7 @@ export const LocalFooter = () => (
           <Heading as="h3" size={1} font="druk-wide" uppercase className="rs-mb-0">
             Themes
           </Heading>
-          <ul className="list-unstyled children:mb-06em">
+          <ul className="list-unstyled *:mb-06em">
             {Object.values(themes).map((theme) => (
               <li key={theme.name}>
                 <CtaLink color="black" href={theme.path} className="inline-block">{theme.name}</CtaLink>
@@ -86,7 +86,7 @@ export const LocalFooter = () => (
           <Heading as="h3" size={1} font="druk-wide" uppercase className="rs-mb-0">
             Schools
           </Heading>
-          <ul className="list-unstyled children:mb-06em">
+          <ul className="list-unstyled *:mb-06em">
             {Object.values(schools).map((school) => (
               <li key={school.name}>
                 <CtaLink color="black" href={school.href} className="inline-block">{school.name}</CtaLink>

components/LocalFooter/LocalFooterMvp.styles.tsx

@@ -2,6 +2,6 @@ export const root = 'relative overflow-hidden bg-no-repeat bg-bottom bg-cover md
 export const overlay = 'absolute top-0 left-0 w-full h-full bg-gradient-to-b from-gc-black via-gc-black/80 to-gc-black/40';
 export const flexWrapper = 'items-start lg:items-center relative z-10 w-full';
 export const logo = 'scale-125 origin-left sm:scale-100 text-[1.67em] md:text-[1.72em] lg:text-[1.9em]';
-export const ul = 'list-unstyled divide-x divide-white children:inline-block children:mb-0 children:px-16 md:children:px-30 xl:children:px-48 children:leading-display first:children:pl-0 last:children:pr-0 lg:mx-auto w-fit rs-mt-2 gap-y-10';
+export const ul = 'list-unstyled divide-x divide-white *:inline-block *:mb-0 *:px-16 md:*:px-30 xl:*:px-48 *:leading-display first:*:pl-0 last:*:pr-0 lg:mx-auto w-fit rs-mt-2 gap-y-10';
 export const grid = 'w-full lg:gap-x-[7vw] 3xl:gap-x-300';
 export const column2 = 'rs-mt-3 lg:mt-0';

components/Quote/Quote.styles.ts

@@ -6,8 +6,8 @@ export const root = (
   quoteOnRight?: boolean,
   hasBar?: boolean,
 ) => cnb('relative break-words flex flex-col lg:max-w-prose lg:ml-0', {
-  'max-w-[90%] sm:max-w-[80%] mx-auto md:max-w-full': isMinimal && !addDarkOverlay,
-  'bg-gc-black/50 backdrop-blur-sm h-full children:mt-auto children:mb-0 text-white': addDarkOverlay && !isMinimal,
+  'max-w-[90%] sm:max-w-4/5 mx-auto md:max-w-full': isMinimal && !addDarkOverlay,
+  'bg-gc-black/50 backdrop-blur-sm h-full *:mt-auto *:mb-0 text-white': addDarkOverlay && !isMinimal,
   'rs-pl-4': !quoteOnRight && (!isMinimal || addDarkOverlay),
   'rs-pr-4': quoteOnRight && (!isMinimal || addDarkOverlay),
   'rs-px-4': addDarkOverlay && !hasBar,

components/RichText.tsx

@@ -80,7 +80,7 @@ export const RichText = ({
           <CtaLink
             sbLink={sbLink}
             variant={textColor === 'white' ? 'inlineDark' : 'inline'}
-            className="children:inline"
+            className="*:inline"
             // Custom link attributes are not supported by the rich text renderer currently
             // Adding rel="noopener" for all eternal links for security reasons
             rel={linktype === 'url' ? 'noopener' : undefined}

components/Scrollytelling/Scrollytelling.styles.ts

@@ -37,4 +37,4 @@ export const heading = 'relative z-10 mb-02em whitespace-pre-line';
 export const subhead = 'sm:max-w-[40ch] mx-auto';
 export const children = 'grid gap-y-30 md:gap-y-40 xl:gap-y-60';
 
-export const caption = 'relative children:children:leading-display caption mt-07em children:max-w-prose-wide ml-0';
+export const caption = 'relative *:*:leading-display caption mt-07em *:max-w-prose-wide ml-0';

components/SplitPoster/SplitPoster.styles.tsx

@@ -27,4 +27,4 @@ export const heading = (hasImage: boolean) => cnb('rs-mb-3 2xl:whitespace-pre-li
 
 export const body = 'rs-mb-2 last:mb-0';
 
-export const ctaWrapper = 'children:rs-mb-1 last:children:mb-0 mr-0';
+export const ctaWrapper = '*:rs-mb-1 last:*:mb-0 mr-0';

components/StoryCard/StoryCard.styles.tsx

@@ -14,7 +14,7 @@ export const heading = (hasTabColor: boolean) => cnb('mt-06em rs-mb-neg1 text-cu
 
 export const headingLink = 'stretched-link no-underline !font-bold !leading-tight';
 
-export const taxonomy = (hasTabColor: boolean) => cnb('list-unstyled leading-display children:mr-12 last:children:ml-0 mr-18 ml-36', {
+export const taxonomy = (hasTabColor: boolean) => cnb('list-unstyled leading-display *:mr-12 last:*:ml-0 mr-18 ml-36', {
   '@200:ml-24 @xs:ml-36': hasTabColor,
 });
 

components/StoryImage/StoryImage.styles.ts

@@ -21,4 +21,4 @@ export const animateWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-
 export const figure = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const imageWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const image = 'w-full h-full object-cover';
-export const caption = 'children:children:leading-display caption mt-1em max-w-prose-wide';
+export const caption = '*:*:leading-display caption mt-1em max-w-prose-wide';

components/StoryPoC/BrochureStory.tsx

@@ -29,7 +29,7 @@ export const BrochureStory = () => {
       <Container pb={10}>
         <Heading as="h1" srOnly>Solve for now. To shape what’s next.</Heading>
         <Text font="serif" weight="bold" leading="tight" align="center" aria-hidden className="max-w-[110rem] mx-auto">
-          <Text as="span" size="f7" font="serif" className="block rs-mb-4 children:mx-auto">
+          <Text as="span" size="f7" font="serif" className="block rs-mb-4 *:mx-auto">
             <AnimatedText text="Solved for now." />
           </Text>
           <AnimateInView animation="sharpen" delay={1} duration={0.6} >

components/StoryPoC/ChatbotStory.tsx

@@ -191,15 +191,15 @@ export const ChatbotStory = () => {
           </Bubble>
           <BubbleButton
             className="mt-30"
-            bubbleClassName={q1Choice !== 'learning' ? 'children:transition-colors children:hocus:border-solid children:border children:border-dashed children:!border-white children:!bg-transparent' : ''}
+            bubbleClassName={q1Choice !== 'learning' ? '*:transition-colors *:hocus:border-solid *:border *:border-dashed *:!border-white *:!bg-transparent' : ''}
             delay={10.5}
             onClick={() => setQ1Choice('learning')}
           >
             1. How AI transforms the future of learning
           </BubbleButton>
           <BubbleButton
             className="mt-10"
-            bubbleClassName={q1Choice !== 'poverty' ? 'children:transition-colors children:hocus:border-solid children:border children:border-dashed children:!border-white children:!bg-transparent' : ''}
+            bubbleClassName={q1Choice !== 'poverty' ? '*:transition-colors *:hocus:border-solid *:border *:border-dashed *:!border-white *:!bg-transparent' : ''}
             delay={10.5}
             onClick={() => setQ1Choice('poverty')}
           >

components/Storyblok/SbSection.tsx

@@ -193,7 +193,7 @@ export const SbSection = ({
           <RichText
             wysiwyg={caption}
             textColor="black-70"
-            className="caption children:leading-display mt-08em max-w-prose-wide"
+            className="caption *:leading-display mt-08em max-w-prose-wide"
           />
         </WidthBox>
       )}

components/VerticalPoster/VerticalPoster.styles.ts

@@ -18,7 +18,7 @@ export const heading = (isSmallHeading: boolean, hasBgImage: boolean) => cnb(
   'bg-clip-text text-black/40': hasBgImage,
 });
 export const customHeading = (hasBgImage: boolean) => cnb(
-  'flex flex-col mb-0 children:block bg-fixed bg-cover bg-center bg-no-repeat', {
+  'flex flex-col mb-0 *:block bg-fixed bg-cover bg-center bg-no-repeat', {
   'bg-clip-text text-black/40': hasBgImage,
 });
 export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
@@ -30,7 +30,7 @@ export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolea
 });
 
 export const body = 'rs-mt-3';
-export const metadata = 'rs-mt-4 children:mx-auto';
+export const metadata = 'rs-mt-4 *:mx-auto';
 export const date = 'block text-center';
 export const cta = 'rs-mt-3';
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ood-giving-campaign",
   "version": "0.0.2",
-  "description": "Giving Campaign",
+  "description": "Momentum",
   "author": "Stanford University",
   "keywords": [
     "nextjs",
@@ -54,7 +54,7 @@
     "@types/react": "^18.2",
     "@types/react-dom": "^18.2",
     "autoprefixer": "^10.4.16",
-    "decanter": "^7.1.2",
+    "decanter": "github:SU-SWS/decanter#tw-3.4.1",
     "eslint": "^8.50.0",
     "eslint-config-next": "^13.4.13",
     "netlify-plugin-vault-variables": "^1.0.7",