React 19 Tailwind 4 Support

[iamyuu]

No description provided.

[ekmas]

Hey, v4 components are not ready yet, I'll update the docs soon, but basically use tailwind v3 until I migrate to v4.

[arm-learning]

hello sir, do you have an ETA by chance on V4?

[ekmas]

@arm-learning not right now, I'll keep you updated.

[ekmas]

I can't convert to discussion xd

[ekmas]

React 19 Tailwind 4 canary release (not stable yet)

I will share components here so you can play with them. I don't suggest anyone using these in production because I will probably change them completely (I will update the styling, add better theme customization, better cli support and so on).

Project migration guide

Basically check the shadcn tailwind 4 guide: https://ui.shadcn.com/docs/tailwind-v4

How to add new React 19 Tailwind v4 components?

You can use them simply by copying them from v4-canary branch.

CSS Variables components

Link to css variables components: https://github.com/ekmas/neobrutalism-components/tree/v4-canary/apps/docs/src/components/css-vars

Utility classes components

Link to utility classes components: https://github.com/ekmas/neobrutalism-components/tree/v4-canary/apps/docs/src/components/ui

How to update the styling?

If you followed the tailwind v4 upgrade guide right (which means you removed tailwind.config), you'll need to update your globals.css (or index.css however you called it).

For CSS Variables

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

:root {
  --bg: #dfe5f2;
  --bw: #fff;
  --blank: #000;
  --border: #000;
  --text: #000;
  --mtext: #000;
  --ring: #000;
  --ring-offset: #fff;

  --main: #88aaee;
  --overlay: rgba(0, 0, 0, 0.8);

  --border-radius: 5px;
  --box-shadow-x: 4px;
  --box-shadow-y: 4px;
  --reverse-box-shadow-x: -4px;
  --reverse-box-shadow-y: -4px;

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
}

.dark {
  --bg: #272933;
  --bw: #212121;
  --blank: #fff;
  --border: #000;
  --text: #e6e6e6;
  --mtext: #000;
  --ring: #fff;
  --ring-offset: #000;

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
}

@theme inline {
  --color-secondaryBlack: #212121;
  --color-overlay: var(--overlay);
  --color-main: var(--main);
  --color-bg: var(--bg);
  --color-bw: var(--bw);
  --color-blank: var(--blank);
  --color-text: var(--text);
  --color-mtext: var(--mtext);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-ringOffset: var(--ring-offset);

  --spacing-boxShadowX: var(--box-shadow-x);
  --spacing-boxShadowY: var(--box-shadow-y);
  --spacing-reverseBoxShadowX: var(--reverse-box-shadow-x);
  --spacing-reverseBoxShadowY: var(--reverse-box-shadow-y);

  --radius-base: var(--border-radius);

  --shadow-shadow: var(--shadow);

  --font-weight-base: 500;
  --font-weight-heading: 700;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-marquee: marquee 5s linear infinite;
  --animate-marquee2: marquee2 5s linear infinite;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}

For utility classes

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

:root {
  --border: #000;
  --dark-border: #000;
  --box-shadow-x: 4px;
  --box-shadow-y: 4px;
  --reverse-box-shadow-x: -4px;
  --reverse-box-shadow-y: -4px;
  --border-radius: 5px;
}

@theme inline {
  --color-main: #88aaee;
  --color-bg: #dfe5f2;
  --color-darkBg: #272933;
  --color-border: #000;
  --color-darkBorder: #000;
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-text: #000;
  --color-darkText: #e6e6e6;
  --color-secondaryBlack: #212121;

  --spacing-boxShadowX: var(--box-shadow-x);
  --spacing-boxShadowY: var(--box-shadow-y);
  --spacing-reverseBoxShadowX: var(--reverse-box-shadow-x);
  --spacing-reverseBoxShadowY: var(--reverse-box-shadow-y);

  --radius-base: var(--border-radius);

  --shadow-light: var(--box-shadow-x) var(--box-shadow-y) 0px 0px #000;
  --shadow-dark: var(--box-shadow-x) var(--box-shadow-y) 0px 0px #000;

  --font-weight-base: 500;
  --font-weight-heading: 700;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-marquee: marquee 5s linear infinite;
  --animate-marquee2: marquee2 5s linear infinite;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}