chore: update Tailwind and related components

- Updated Tailwind configuration and dependencies
- Modified various components to align with new Tailwind setup
- Removed obsolete Tailwind config file

dashboard/package.json

@@ -15,7 +15,8 @@
     "preview": "vite preview",
     "prepare": "cd .. && husky dashboard/.husky",
     "pycommit": "cd .. && cd backend && sh pre-commit",
-    "pypush": "cd .. && cd backend && sh pre-push"
+    "pypush": "cd .. && cd backend && sh pre-push",
+    "prettify": "prettier --write ./src"
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
@@ -62,7 +63,6 @@
     "react-icons": "^5.4.0",
     "react-intl": "^6.8.9",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
     "ts-pattern": "^5.6.2",
     "vaul": "^0.9.9",
     "vite": "^5.4.14",
@@ -78,6 +78,7 @@
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
+    "@tailwindcss/vite": "^4.0.6",
     "@tanstack/eslint-plugin-query": "^5.65.0",
     "@tanstack/router-devtools": "^1.46.9",
     "@tanstack/router-plugin": "^1.46.6",
@@ -87,7 +88,6 @@
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.22.0",
     "@typescript-eslint/parser": "^8.22.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-webpack": "^0.13.10",
@@ -98,11 +98,10 @@
     "eslint-plugin-react-refresh": "^0.4.18",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.1.7",
-    "postcss": "^8.5.1",
     "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "storybook": "^8.5.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3",
     "vitest": "^2.1.9"
   }

dashboard/src/components/Breadcrumb/Breadcrumb.tsx

@@ -46,7 +46,7 @@ type BreadcrumbSeparatorProps = Omit<
 const BreadcrumbSeparator = ({
   ...props
 }: BreadcrumbSeparatorProps): JSX.Element => {
-  return <BreadcrumbSeparatorComponent {...props} className="text-weakGray" />;
+  return <BreadcrumbSeparatorComponent {...props} className="text-weak-gray" />;
 };
 
 export {

dashboard/src/components/Breadcrumb/HardwareBreadcrumb.tsx

@@ -24,7 +24,7 @@ const HardwareBreadcrumb = ({
 }): JSX.Element => {
   const hardwareId = useRouterState({ select: s => s.location.state.id });
   return (
-    <Breadcrumb className="pb-6 pt-6">
+    <Breadcrumb className="pt-6 pb-6">
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink to="/hardware" search={searchParams}>

dashboard/src/components/Breadcrumb/TreeBreadcrumb.tsx

@@ -24,7 +24,7 @@ const TreeBreadcrumb = ({
 }): JSX.Element => {
   const treeId = useRouterState({ select: s => s.location.state.id });
   return (
-    <Breadcrumb className="pb-6 pt-6">
+    <Breadcrumb className="pt-6 pb-6">
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink to="/tree" search={searchParams}>

dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -159,9 +159,9 @@ const BuildDetails = ({
                     ? 'INVALID'
                     : 'NULL',
                 icon: data.valid ? (
-                  <MdCheck className="text-xl text-green" />
+                  <MdCheck className="text-green text-xl" />
                 ) : (
-                  <MdClose className="text-xl text-red" />
+                  <MdClose className="text-red text-xl" />
                 ),
               },
               {

dashboard/src/components/BuildDetails/BuildDetailsTestSection.tsx

@@ -34,7 +34,7 @@ const BuildDetailsTestSection = ({
       <span className="text-2xl font-bold">
         {intl.formatMessage({ id: 'buildDetails.testResults' })}
       </span>
-      <Separator className="my-6 bg-darkGray" />
+      <Separator className="bg-dark-gray my-6" />
       {hasTest ? (
         <div className="flex flex-col gap-6">
           <TestsTable

dashboard/src/components/Button/ButtonWithIcon.tsx

@@ -11,7 +11,7 @@ interface IButtonWithIcon extends React.ComponentProps<typeof Button> {
 }
 
 const buttonsClassName =
-  'bg-lightGray border-2 border-black text-black rounded-full items-center gap-2 hover:bg-darkGray px-6';
+  'bg-light-gray border-2 border-black text-black rounded-full items-center gap-2 hover:bg-dark-gray px-6';
 
 const ButtonWithIcon = ({
   icon,

dashboard/src/components/Button/MoreDetailsButton.tsx

@@ -16,7 +16,7 @@ const MoreDetailsLinkButton = ({
     <Button
       asChild
       variant="outline"
-      className="w-min rounded-full border-2 border-black text-sm text-dimGray hover:bg-mediumGray"
+      className="text-dim-gray hover:bg-medium-gray w-min rounded-full border-2 border-black text-sm"
     >
       <Link {...linkProps}>
         <div className="flex gap-2">

dashboard/src/components/Cards/BaseCard.tsx

@@ -28,11 +28,11 @@ export const BaseCard = ({
   return (
     <div
       className={cn(
-        'mb-6 flex h-fit w-full break-inside-avoid-column flex-col gap-2 rounded-xl border border-darkGray bg-white pt-4 text-black',
+        'border-dark-gray mb-6 flex h-fit w-full break-inside-avoid-column flex-col gap-2 rounded-xl border bg-white pt-4 text-black',
         className,
       )}
     >
-      <div className="border-b border-darkGray pb-2 pl-3 font-bold">
+      <div className="border-dark-gray border-b pb-2 pl-3 font-bold">
         {title}
       </div>
       <div>{children ? children : content}</div>

dashboard/src/components/Checkbox/Checkbox.tsx

@@ -10,7 +10,7 @@ interface ICheckbox {
 }
 
 const containerClass =
-  'min-w-[300px] p-4 border-[2px] border-darkGray rounded cursor-pointer text-dimGray';
+  'min-w-[300px] p-4 border-[2px] border-dark-gray rounded-sm cursor-pointer text-dim-gray';
 
 const maxCheckboxLength = 30;
 

dashboard/src/components/DetailsPages/SectionError.tsx

@@ -53,7 +53,7 @@ const SectionError = ({
   }
 
   return (
-    <div className="flex flex-col items-center py-6 text-weakGray">
+    <div className="text-weak-gray flex flex-col items-center py-6">
       {variant === 'error' && !isLoading && (
         <RiProhibited2Line className="h-14 w-14" />
       )}

dashboard/src/components/Filter/CheckboxSection.tsx

@@ -105,7 +105,7 @@ const CheckboxSubsection = ({
 }: ICheckboxSubsection): JSX.Element => {
   return (
     <div>
-      <h4 className="mb-2 mt-6 text-sm font-medium text-dimGray">{title}</h4>
+      <h4 className="text-dim-gray mt-6 mb-2 text-sm font-medium">{title}</h4>
       <CheckboxList items={items} onClickItem={onClickItem} />
     </div>
   );
@@ -135,11 +135,11 @@ const CheckboxSection = ({
 
   return (
     <div className={cls(className)}>
-      <h3 className="mb-2 flex items-center gap-[0.4rem] text-xl font-semibold text-dimGray">
+      <h3 className="text-dim-gray mb-2 flex items-center gap-[0.4rem] text-xl font-semibold">
         <FilterTypeIcon type={isGlobal ? 'global' : 'tab'} />
         <span>{title}</span>
       </h3>
-      <h4 className="mb-6 text-sm text-dimGray">{subtitle}</h4>
+      <h4 className="text-dim-gray mb-6 text-sm">{subtitle}</h4>
       {items && <CheckboxList items={items} onClickItem={onClickItem} />}
       {subsectionComponents}
     </div>

dashboard/src/components/Filter/CodeBlock.tsx

@@ -40,7 +40,7 @@ const CodeBlockDialog = ({ children }: PropsWithChildren): JSX.Element => {
         <DialogTrigger asChild className="p-2">
           <Button
             variant="outline"
-            className="absolute right-[20px] top-[10px] opacity-50 hover:opacity-100"
+            className="absolute top-[10px] right-[20px] opacity-50 hover:opacity-100"
           >
             <GoScreenFull size={25} />
           </Button>
@@ -108,7 +108,7 @@ const HighlightCounts = ({
         <li className="flex gap-1">
           <ColoredCircle
             quantity={highlightedCode.failCount}
-            backgroundClassName="bg-lightRed"
+            backgroundClassName="bg-light-red"
           />
           <FormattedMessage id="global.fails" defaultMessage={'Fails'} />
         </li>
@@ -126,7 +126,7 @@ const HighlightCounts = ({
               highlightedCode.failCount -
               highlightedCode.errorCount
             }
-            backgroundClassName="bg-mediumGray"
+            backgroundClassName="bg-medium-gray"
           />
           <FormattedMessage id="global.others" defaultMessage={'Others'} />
         </li>

dashboard/src/components/Filter/Drawer.tsx

@@ -58,12 +58,12 @@ const DrawerHeader = (): JSX.Element => {
 const DrawerLink = ({ link }: IDrawerLink): JSX.Element => {
   return (
     <div className="mb-8 flex items-center justify-between">
-      <div className="flex h-[52px] w-full flex-col border border-darkGray bg-white px-4 py-2">
-        <span className="text-xs text-darkGray2">
+      <div className="border-dark-gray flex h-[52px] w-full flex-col border bg-white px-4 py-2">
+        <span className="text-dark-gray2 text-xs">
           <FormattedMessage id={link.title} />
         </span>
         <a
-          className="text-base text-dimBlack underline"
+          className="text-dim-black text-base underline"
           href={link.url ?? '#'}
           target={link.url ? '_blank' : undefined}
           rel="noreferrer"
@@ -85,9 +85,7 @@ export const DrawerSection = ({
   return (
     <>
       {!hideSeparator && <Separator />}
-      <div className="[&:last-child]:pt-10 [&:not(:last-child)]:py-10">
-        {children}
-      </div>
+      <div className="not-last:py-10 last:pt-10">{children}</div>
     </>
   );
 };
@@ -156,7 +154,7 @@ const Drawer = ({
         />
       </DrawerTrigger>
 
-      <DrawerContent className="flex max-h-screen items-center bg-lightGray px-4">
+      <DrawerContent className="bg-light-gray flex max-h-screen items-center px-4">
         <DrawerHeader />
         <section className="max-h-full overflow-y-auto">
           <DrawerLink link={link} />
@@ -166,15 +164,15 @@ const Drawer = ({
           </div>
         </section>
 
-        <DrawerFooter className="mt-6 flex h-20 w-full flex-row justify-end gap-x-6 bg-white text-dimGray">
+        <DrawerFooter className="text-dim-gray mt-6 flex h-20 w-full flex-row justify-end gap-x-6 bg-white">
           <DrawerClose asChild>
             <Button variant="ghost" onClick={onCancel}>
               Cancel
             </Button>
           </DrawerClose>
           <DrawerClose
             asChild
-            className="w-[200px] rounded-full bg-blue text-white"
+            className="bg-blue w-[200px] rounded-full text-white"
           >
             <Button variant="outline" onClick={onFilter}>
               Filter

dashboard/src/components/Filter/SummarySection.tsx

@@ -32,7 +32,7 @@ const SummarySection = ({ title, columns }: ISummarySection): JSX.Element => {
   );
 
   return (
-    <div className="min-h-[100px] text-dimGray">
+    <div className="text-dim-gray min-h-[100px]">
       <h4 className="mb-6 text-xl font-semibold">{title}</h4>
       <div className="flex justify-between">{columnComponents}</div>
     </div>

dashboard/src/components/Filter/TimeRangeSection.tsx

@@ -27,8 +27,8 @@ const TimeRangeSection = ({
   onMaxChange,
 }: TimeRangeSection): JSX.Element => {
   return (
-    <div className="flex flex-col gap-y-2 text-dimGray">
-      <h3 className="mb-2 flex items-center gap-[0.4rem] text-xl font-semibold text-dimGray">
+    <div className="text-dim-gray flex flex-col gap-y-2">
+      <h3 className="text-dim-gray mb-2 flex items-center gap-[0.4rem] text-xl font-semibold">
         <FilterTypeIcon type={isGlobal ? 'global' : 'tab'} />
         <span>{title}</span>
       </h3>

dashboard/src/components/FilterList/FilterList.tsx

@@ -28,9 +28,9 @@ export interface IFilterButton
 }
 
 const baseButtonClassNames =
-  'text-sm h-10 pr-2 rounded-md flex items-center bg-darkGray hover:bg-mediumGray';
+  'text-sm h-10 pr-2 rounded-md flex items-center bg-dark-gray hover:bg-medium-gray';
 const primaryClassNames = 'bg-blue text-white';
-const secondaryClassNames = 'bg-darkGray text-black';
+const secondaryClassNames = 'bg-dark-gray text-black';
 
 const FilterButton = ({
   text,
@@ -104,7 +104,7 @@ const FilterList = ({
     <div className="flex flex-wrap items-center gap-4">
       {buttonList}
       <FilterButton
-        className="hover:bg-darkGray2"
+        className="hover:bg-dark-gray2"
         text={intl.formatMessage({ id: 'global.cleanAll' })}
         variant="primary"
         onClick={onClickCleanAll}

dashboard/src/components/Icons/JsonView.tsx

@@ -7,7 +7,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/Tooltip';
 export const JsonViewIcon = (): JSX.Element => (
   <Tooltip>
     <TooltipTrigger>
-      <AiOutlineFileSearch className="text-lg text-blue" />
+      <AiOutlineFileSearch className="text-blue text-lg" />
     </TooltipTrigger>
     <TooltipContent>
       <FormattedMessage id="global.viewJson" />

dashboard/src/components/Icons/LogView.tsx

@@ -7,7 +7,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/Tooltip';
 export const LogViewIcon = (): JSX.Element => (
   <Tooltip>
     <TooltipTrigger>
-      <MdOutlineFileOpen className="text-lg font-bold text-blue" />
+      <MdOutlineFileOpen className="text-blue text-lg font-bold" />
     </TooltipTrigger>
     <TooltipContent>
       <FormattedMessage id="global.viewLog" />

dashboard/src/components/Issue/IssueSection.tsx

@@ -21,7 +21,7 @@ import { IssueTooltip } from './IssueTooltip';
 
 export const NoIssueFound = (): JSX.Element => {
   return (
-    <div className="flex flex-col items-center py-6 text-weakGray">
+    <div className="text-weak-gray flex flex-col items-center py-6">
       <RiProhibited2Line className="h-14 w-14" />
       <h1 className="text-2xl font-semibold">
         <FormattedMessage id={'issue.noIssueFound'} />
@@ -47,7 +47,7 @@ const IssueSection = ({
         return (
           <Link
             key={issue.id + issue.version}
-            className="mb-16 flex [&:not(:last-child)]:mb-2 [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-2"
+            className="mb-16 flex not-last:mb-2 not-last:border-b not-last:pb-2"
             to={'/issue/$issueId'}
             params={{ issueId: issue.id }}
             state={s => s}

dashboard/src/components/IssueDetails/IssueDetailsBuildSection.tsx

@@ -70,7 +70,7 @@ export const IssueDetailsBuildSection = ({
       <h2 className="text-2xl font-bold">
         {formatMessage({ id: 'global.builds' })}
       </h2>
-      <Separator className="my-6 bg-darkGray" />
+      <Separator className="bg-dark-gray my-6" />
       {data ? (
         <div className="flex flex-col gap-6">
           <BuildsTable

dashboard/src/components/IssueDetails/IssueDetailsTestSection.tsx

@@ -57,7 +57,7 @@ export const IssueDetailsTestSection = ({
       <h2 className="text-2xl font-bold">
         {formatMessage({ id: 'global.tests' })}
       </h2>
-      <Separator className="my-6 bg-darkGray" />
+      <Separator className="bg-dark-gray my-6" />
       {data ? (
         <div className="flex flex-col gap-6">
           <TestsTable

dashboard/src/components/LineChart/LineChart.tsx

@@ -48,7 +48,7 @@ export const LineChart = ({
   return (
     <div className="px-4">
       {labels && (
-        <div className="mb-0 mt-3 flex justify-end gap-2">{labels}</div>
+        <div className="mt-3 mb-0 flex justify-end gap-2">{labels}</div>
       )}
       <LineChartComponent
         className="w-full"

dashboard/src/components/ListingItem/ListingItem.tsx

@@ -22,10 +22,10 @@ export interface IListingItem {
 
 export enum ItemType {
   Warning = 'bg-yellow',
-  Error = 'bg-lightRed',
-  Success = 'bg-lightGreen',
-  Unknown = 'bg-mediumGray',
-  None = 'bg-lightGray',
+  Error = 'bg-light-red',
+  Success = 'bg-light-green',
+  Unknown = 'bg-medium-gray',
+  None = 'bg-light-gray',
 }
 
 // TODO Add Tooltip text
@@ -42,7 +42,7 @@ const ListingItem = ({
   tooltip,
 }: IListingItem): JSX.Element => {
   const hasBorder = hasBottomBorder
-    ? '[&:not(:last-child)]:border-b [&:not(:last-child)]:pb-2 [&:not(:last-child)]:mb-2'
+    ? 'not-last:border-b not-last:pb-2 not-last:mb-2'
     : '';
   const hasErrors = errors && errors > 0 && showNumber;
   const hasWarnings = warnings && warnings > 0 && showNumber;