Tailwind

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
     "vitest.explorer",
     "ms-playwright.playwright"
   ],

.vscode/settings.json

@@ -11,6 +11,10 @@
   },
   "task.autoDetect": "off",
   "typescript.tsdk": "node_modules/typescript/lib",
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.classFunctions": ["clsx", "cn", "cva"],
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

database-editor.code-workspace

@@ -1,6 +1,12 @@
 {
   "extensions": {
-    "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "vitest.explorer", "ms-playwright.playwright"]
+    "recommendations": [
+      "esbenp.prettier-vscode",
+      "dbaeumer.vscode-eslint",
+      "bradlc.vscode-tailwindcss",
+      "vitest.explorer",
+      "ms-playwright.playwright"
+    ]
   },
   "folders": [
     {
@@ -37,6 +43,10 @@
       "**/node_modules": true,
       "**/lib": true
     },
+    "files.associations": {
+      "*.css": "tailwindcss"
+    },
+    "tailwindCSS.classFunctions": ["clsx", "cn", "cva"],
     "[css]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },

eslint.config.mjs

@@ -5,6 +5,7 @@ export default defineConfig([
   globalIgnores(['packages/protocol/src/editor.ts']),
   ...config.base,
   ...config.i18n,
+  ...config.tailwind('packages/database-editor/src/index.css'),
   // TypeScript configs
   {
     name: 'typescript-eslint',

integrations/standalone/package.json

@@ -17,9 +17,11 @@
     "react-i18next": "^16.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^6.0.0",
+    "tailwindcss": "^4.2.2",
     "vite": "^8.0.0"
   },
   "scripts": {

integrations/standalone/src/index.css

@@ -1,6 +1,8 @@
-@layer icons;
+@import 'tailwindcss';
+@source '../node_modules/@axonivy/database-editor/src';
+@import '@axonivy/ui-components/src/styles/themes.css';
 
-@import '@axonivy/ui-icons/src-gen/ivy-icons.css' layer(icons);
+@import '@axonivy/ui-icons/src-gen/ivy-icons.css' layer(base);
 @import '@axonivy/ui-components/lib/components.css';
 
 html,
@@ -9,15 +11,3 @@ body,
   height: 100%;
   overflow: hidden;
 }
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}

integrations/standalone/src/index.tsx

@@ -25,7 +25,7 @@ export async function start(): Promise<void> {
   root.render(
     <React.StrictMode>
       <ThemeProvider defaultTheme={theme}>
-        <Flex style={{ height: '100%' }} justifyContent='center' alignItems='center'>
+        <Flex className='h-full' justifyContent='center' alignItems='center'>
           <Spinner size='large' />
         </Flex>
         <Toaster closeButton={true} position='bottom-left' />

integrations/standalone/vite.config.ts

@@ -1,9 +1,10 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
   build: {
     outDir: 'build',
     chunkSizeWarningLimit: 5000,

package.json

@@ -41,6 +41,7 @@
     "@types/node": "^24.0.0",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3"
   },
   "prettier": "@axonivy/prettier-config"

packages/database-editor/eslint.config.mjs

@@ -0,0 +1,10 @@
+import config from '@axonivy/eslint-config';
+import root from '../../eslint.config.mjs';
+
+export default config.defineConfig(...root, {
+  settings: {
+    'better-tailwindcss': {
+      entryPoint: 'src/index.css'
+    }
+  }
+});

packages/database-editor/package.json

@@ -35,6 +35,7 @@
     "@axonivy/jsonrpc": "~14.0.0-next.1079.485110d",
     "@axonivy/ui-components": "~14.0.0-next.1079.485110d",
     "@axonivy/ui-icons": "~14.0.0-next.1079.485110d",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
@@ -45,6 +46,7 @@
     "jsdom": "^28.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.0",

packages/database-editor/src/DatabaseEditor.tsx

@@ -19,10 +19,9 @@
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppProvider } from './AppContext';
-import './DatabaseEditor.css';
 import { DatabaseDetail } from './components/editor/detail/DatabaseDetail';
 import { DatabaseMasterContent } from './components/editor/master/DatabaseMasterContent';
 import { DatabaseMasterToolbar } from './components/editor/master/DatabaseMasterToolbar';
@@ -36,7 +35,7 @@
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({ groupId: 'database-editor-resize', storage: localStorage });
   const { t } = useTranslation();
   const [selectedDatabase, setSelectedDatabase] = useState<number>();
   const [initialData, setInitalData] = useState<DatabaseConfigurations | undefined>(undefined);
   const history = useHistoryData<DatabaseConfigurations>();
 
   const context = useMemo<DatabaseEditorContext>(
@@ -150,10 +149,21 @@
   const openUrl = useAction('openUrl');
   useHotkeys(hotkeys.openHelp.hotkey, () => openUrl(data?.helpUrl), { scopes: ['global'] });
   useHotkeys(hotkeys.testConnection.hotkey, () => connectionTestFunction.mutate(), { scopes: ['global'] });
+  const detailRef = useRef<HTMLDivElement>(null);
+  useHotkeys(
+    hotkeys.focusInscription.hotkey,
+    () => {
+      setDetail(true);
+      detailRef.current?.focus();
+    },
+    {
+      scopes: ['global']
+    }
+  );
 
   if (isPending) {
     return (
-      <Flex alignItems='center' justifyContent='center' style={{ width: '100%', height: '100%' }}>
+      <Flex alignItems='center' justifyContent='center' className='size-full'>
         <Spinner />
       </Flex>
     );
@@ -180,17 +190,17 @@
       }}
     >
       <ResizableGroup orientation='horizontal' defaultLayout={defaultLayout} onLayoutChanged={onLayoutChanged}>
-        <ResizablePanel id='main' defaultSize='75%' minSize='50%' className='database-editor-main-panel'>
-          <Flex direction='column' className='database-editor-panel-content'>
+        <ResizablePanel id='database-editor-main' defaultSize='75%' minSize='50%' className='bg-n75'>
+          <Flex direction='column' className='h-full'>
             <DatabaseMasterToolbar detail={detail} setDetail={setDetail} />
             <DatabaseMasterContent detail={detail} setDetail={setDetail} />
           </Flex>
         </ResizablePanel>
         {detail && (
           <>
             <ResizableHandle />
-            <ResizablePanel id='properties' defaultSize='25%' minSize='10%' className='database-editor-detail-panel'>
-              <DatabaseDetail />
+            <ResizablePanel id='database-editor-detail' defaultSize='25%' minSize='10%'>
+              <DatabaseDetail ref={detailRef} />
             </ResizablePanel>
           </>
         )}

packages/database-editor/src/components/ImportWizard/ImportWizard.tsx

@@ -15,7 +15,6 @@ import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ContextProvider } from '../../util/ContextProvider';
 import { useKnownHotkeys } from '../../util/hotkeys';
-import './ImportWizard.css';
 import { WizardContent } from './WizardContent';
 
 const DIALOG_HOTKEY_IDS = ['importWizardDialog'];
@@ -52,7 +51,7 @@ export const ImportWizard = ({
             <TooltipContent>{hotkeys.generate.label}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <DialogContent className='database-editor-import-dialog'>
+        <DialogContent className='h-auto! max-h-none! w-[clamp(300px,1200px,calc(100%-200px))]! max-w-none!'>
           <DialogTitle>{t('import.generate')}</DialogTitle>
           <WizardContent projects={context.projects} closeDialog={() => onOpenChange(false)} callback={callback} />
         </DialogContent>

packages/database-editor/src/components/ImportWizard/WizardContent.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { ProceedButton } from './components/ProceedButton';
 import { Timeline } from './components/Timeline';
 import { usePages } from './pages/usePages';
-import './WizardContent.css';
 
 export type ImportPage = {
   page: ReactNode;
@@ -29,22 +28,16 @@ export const WizardContent = ({ projects, closeDialog, callback }: WizardContent
     <Flex
       direction='column'
       gap={4}
-      style={{ overflow: 'auto' }}
       justifyContent='space-between'
-      className={`database-${pages[activePage]?.identifier} database-editor-import-content`}
+      className='box-border h-[80vh] w-full self-center overflow-auto px-12.5 pt-5 pb-2.5'
     >
       <Timeline pages={pages} active={activePage} setActive={jumpToPage} />
       {pages[activePage]?.page}
       <Flex direction='row' justifyContent='space-between'>
-        <Button
-          variant='outline'
-          onClick={closeDialog}
-          size='large'
-          className={cn(activePage >= pages.length - 1 && 'import-wizard-close-hidden')}
-        >
+        <Button variant='outline' onClick={closeDialog} size='large' className={cn(activePage >= pages.length - 1 && 'hidden')}>
           {t('import.cancel')}
         </Button>
-        <Flex direction='row' gap={2} justifyContent='flex-end' className='import-wizard-proceed-buttons'>
+        <Flex direction='row' gap={2} justifyContent='flex-end' className='w-full'>
           <Button
             disabled={activePage <= 0}
             icon={IvyIcons.Chevron}

packages/database-editor/src/components/ImportWizard/components/AttributeSelection.tsx

@@ -14,7 +14,6 @@ import {
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useTranslation } from 'react-i18next';
-import './AttributeSelection.css';
 
 export const AttributeSelection = ({
   table,
@@ -36,15 +35,15 @@ export const AttributeSelection = ({
   return (
     <Popover modal>
       <PopoverTrigger asChild>
-        <Button className='attribute-selection-trigger' icon={IvyIcons.Settings} />
+        <Button aria-label={t('import.attributes')} icon={IvyIcons.Settings} />
       </PopoverTrigger>
-      <PopoverContent className='attribute-selection-content' align='start'>
-        <Table className='attribute-selection-table'>
+      <PopoverContent className='max-h-125 overflow-scroll' align='start'>
+        <Table className='w-[clamp(200px,100%,300px)] max-w-75'>
           <TableHeader>
             <TableRow>
-              <TableHead className='table-header'>{t('import.column')}</TableHead>
-              <TableHead className='table-header'>{t('import.type')}</TableHead>
-              <TableHead className='table-header'>{t('import.generate')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.column')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.type')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.generate')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>