Setup Tailwind

assets/menu/menu.json

@@ -606,11 +606,6 @@
                 {
                     "name": "PrimeGear",
                     "href": "https://gear.primefaces.org"
-                },
-                {
-                    "name": "PrimeFlex CSS",
-                    "icon": "pi pi-table",
-                    "href": "https://primeflex.org"
                 }
             ]
         }

assets/styles/tailwind/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

nuxt.config.js

@@ -62,6 +62,12 @@ export default defineNuxtConfig({
             ]
         }
     },
+    postcss: {
+        plugins: {
+            tailwindcss: {},
+            autoprefixer: {}
+        }
+    },
     runtimeConfig: {
         public: {
             contextPath: baseUrl
@@ -70,5 +76,11 @@ export default defineNuxtConfig({
     gtag: {
         id: 'G-48TTQ6G6KV'
     },
-    css: ['@/assets/styles/primeflex/primeflex-compat.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css', '@docsearch/css/dist/style.css', '@/assets/styles/layout/landing/_landing.scss', '@/assets/styles/layout/layout.scss']
+    css: [ 
+        'primeicons/primeicons.css', 
+        '@/assets/styles/flags.css', 
+        '@docsearch/css/dist/style.css', 
+        '@/assets/styles/tailwind/main.css',
+        '@/assets/styles/layout/layout.scss'
+    ]
 });

package.json

@@ -50,6 +50,7 @@
         "@vitejs/plugin-vue": "4.1.0",
         "@vitest/coverage-istanbul": "^0.29.8",
         "@vue/test-utils": "^2.0.0",
+        "autoprefixer": "^10.4.16",
         "chart.js": "3.3.2",
         "eslint": "^8.30.0",
         "eslint-config-prettier": "^8.5.0",
@@ -58,8 +59,8 @@
         "eslint-plugin-vue": "^9.4.0",
         "jsdom": "^19.0.0",
         "nuxt": "3.3.2",
+        "postcss": "^8.4.31",
         "prettier": "2.7.1",
-        "primeflex": "^3.3.1",
         "primeicons": "^7.0.0",
         "quill": "^1.3.7",
         "rollup-plugin-postcss": "^4.0.0",
@@ -67,6 +68,7 @@
         "rollup-plugin-vue": "^6.0.0-beta.9",
         "sass": "^1.45.0",
         "sass-loader": "^8.0.2",
+        "tailwindcss": "^3.4.1",
         "typedoc": "0.23.23",
         "typescript": "^4.9.4",
         "vitest": "^0.29.8"

tailwind.config.js

@@ -0,0 +1,36 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'class',
+    content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
+    theme: {
+        extend: {
+            colors: {
+                'primary-50': 'rgb(var(--primary-50))',
+                'primary-100': 'rgb(var(--primary-100))',
+                'primary-200': 'rgb(var(--primary-200))',
+                'primary-300': 'rgb(var(--primary-300))',
+                'primary-400': 'rgb(var(--primary-400))',
+                'primary-500': 'rgb(var(--primary-500))',
+                'primary-600': 'rgb(var(--primary-600))',
+                'primary-700': 'rgb(var(--primary-700))',
+                'primary-800': 'rgb(var(--primary-800))',
+                'primary-900': 'rgb(var(--primary-900))',
+                'primary-950': 'rgb(var(--primary-950))',
+
+                'surface-0': 'rgb(var(--surface-0))',
+                'surface-50': 'rgb(var(--surface-50))',
+                'surface-100': 'rgb(var(--surface-100))',
+                'surface-200': 'rgb(var(--surface-200))',
+                'surface-300': 'rgb(var(--surface-300))',
+                'surface-400': 'rgb(var(--surface-400))',
+                'surface-500': 'rgb(var(--surface-500))',
+                'surface-600': 'rgb(var(--surface-600))',
+                'surface-700': 'rgb(var(--surface-700))',
+                'surface-800': 'rgb(var(--surface-800))',
+                'surface-900': 'rgb(var(--surface-900))',
+                'surface-950': 'rgb(var(--surface-950))'
+            }
+        }
+    },
+    plugins: []
+};