Enonic UI: add tailwind support in lib-admin #4186

Author: ashklianko

package.json

@@ -59,7 +59,9 @@
     "postcss-sort-media-queries": "^5.2.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.0",
-    "vite": "^7.1.9"
+    "vite": "^7.1.9",
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   },
   "browserslist": [
     "extends browserslist-config-enonic"

src/main/resources/assets/admin/common/styles/tailwind.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@import "@enonic/ui/preset.css";
+
+@source "../../../../../../../node_modules/@enonic/ui/";

vite.config.ts

@@ -4,6 +4,7 @@ import cssnano from 'cssnano';
 import path from 'path';
 import postcssNormalize from 'postcss-normalize';
 import postcssSortMediaQueries from 'postcss-sort-media-queries';
+import tailwindcss from '@tailwindcss/vite';
 import {fileURLToPath} from 'url';
 import {defineConfig, type UserConfig} from 'vite';
 
@@ -30,7 +31,6 @@ export default defineConfig(({mode}) => {
     js: {
       root: IN_PATH,
       base: './',
-
       build: {
         outDir: OUT_PATH,
         emptyOutDir: false,
@@ -95,13 +95,15 @@ export default defineConfig(({mode}) => {
     css: {
       root: IN_PATH,
       base: './',
+      plugins: [tailwindcss()],
       build: {
         outDir: OUT_PATH,
         emptyOutDir: false,
         minify: isProduction,
         sourcemap: isDevelopment,
         rollupOptions: {
           input: {
+            'styles/tailwind': path.join(IN_PATH, 'styles/tailwind.css'),
             'styles/lib': path.join(IN_PATH, 'styles/main.less'),
             'styles/lib-lite': path.join(IN_PATH, 'styles/main.lite.less'),
           },