chore(deps): upgrade Tailwind v4 (#1770)

* chore: Fix Tailwind v3 installation

* chore(deps): update tailwindcss to v4 (#1771)

* chore(deps): update tailwindcss to v4

* consolidate into App.css

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>
Co-authored-by: Adam Setch <[email protected]>

* pin dep

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>
Co-authored-by: Adam Setch <[email protected]>

Author: bmulholland

package.json

@@ -142,6 +142,7 @@
     "@primer/octicons-react": "19.14.0",
     "@primer/primitives": "10.3.4",
     "@primer/react": "36.27.0",
+    "@tailwindcss/postcss": "4.0.0",
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",
     "@types/node": "22.10.9",
@@ -150,7 +151,6 @@
     "@types/react-dom": "19.0.3",
     "@types/react-router-dom": "5.3.3",
     "@types/semver": "7.5.8",
-    "autoprefixer": "10.4.20",
     "axios": "1.7.9",
     "clsx": "2.1.1",
     "concurrently": "9.1.2",
@@ -176,7 +176,7 @@
     "semver": "7.6.3",
     "styled-components": "6.1.14",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "terser-webpack-plugin": "5.3.11",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.2",

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

postcss.config.js

@@ -1,3 +1,6 @@
+/** Tailwind CSS */
+@import "tailwindcss";
+
 /** GitHub Primer Design System */
 /* Size & Typography */
 @import "@primer/primitives/dist/css/base/size/size.css";
@@ -19,6 +22,9 @@
 @import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
 @import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
 
+/** Tailwind CSS Configuration */
+@config '../../tailwind.config.ts';
+
 html,
 body,
 #root {

src/renderer/App.css

@@ -18,7 +18,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
         <input
           type="checkbox"
           id={props.name}
-          className="size-4 rounded cursor-pointer"
+          className="size-4 rounded-sm cursor-pointer"
           checked={props.checked}
           onChange={props.onChange}
           disabled={props.disabled}

src/renderer/components/fields/Checkbox.tsx

@@ -34,7 +34,7 @@ export const FieldInput: FC<IFieldInput> = ({
             type={type}
             className={cn(
               'text-sm mb-2 px-4 py-1.5 block w-full appearance-none',
-              'rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none',
+              'rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden',
               error ? 'border-red-500' : 'border-gray-500',
             )}
             id={input.name}

src/renderer/components/fields/FieldInput.tsx

@@ -19,7 +19,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
     >
       <QuestionIcon className="ml-1 text-gitify-tooltip-icon" />
       {showTooltip && (
-        <div className="absolute left-[-80px] z-10 w-60 rounded border border-gray-300 p-2 shadow bg-gitify-tooltip-popout">
+        <div className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
           <div className="text-left text-xs text-gitify-font">
             {props.tooltip}
           </div>

src/renderer/components/fields/Tooltip.tsx

@@ -5,7 +5,5 @@ interface IContents {
 }
 
 export const Contents: FC<IContents> = (props: IContents) => {
-  return (
-    <div className="flex-grow overflow-x-auto px-8 pb-4">{props.children}</div>
-  );
+  return <div className="grow overflow-x-auto px-8 pb-4">{props.children}</div>;
 };

src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 
 import 'nprogress/nprogress.css';
-import 'tailwindcss/tailwind.css';
 import { App } from './App';
 
 const container = document.getElementById('root');