feat: tailwind 4 in react

Author: peterpeterparker

templates/react-starter/package.json

@@ -21,18 +21,18 @@
     "@eslint/js": "^9.17.0",
     "@junobuild/config": "^0.0.17",
     "@junobuild/vite-plugin": "^0.0.19",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.3",
     "vite-plugin-node-polyfills": "^0.23.0"
   }

templates/react-starter/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {},
   }
 };

templates/react-starter/src/App.jsx

@@ -17,7 +17,7 @@ function App() {
 
   return (
     <div className="relative isolate min-h-[100dvh]">
-      <main className="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
         <h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
           Welcome to Juno
         </h1>

templates/react-starter/src/components/Article.jsx

@@ -7,8 +7,8 @@ export const Article = ({href, ariaLabel, children, title}) => {
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
-      <h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 group-hover:dark:text-white">
+      className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+      <h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
         {title}
       </h4>
 

templates/react-starter/src/components/Background.jsx

@@ -1,6 +1,6 @@
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
       <img
         src="./juno_illustration.svg"
         role="presentation"

templates/react-starter/src/components/Footer.jsx

@@ -1,6 +1,6 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
+    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
       <span className="flex gap-2 items-baseline">
         <svg
           id="Layer_2"

templates/react-starter/src/components/Hero.jsx

@@ -7,7 +7,7 @@ export const Hero = ({href, ariaLabel, children}) => {
       rel="noreferrer noopener"
       target="_blank"
       aria-label={ariaLabel}
-      className="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+      className="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
       {children}
     </a>
   );

templates/react-starter/src/index.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.js';
 
 @font-face {
   font-family: 'JetBrains Mono';