diff --git a/apps/app/src/assets/styles/tailwind.css b/apps/app/src/assets/styles/tailwind.css new file mode 100644 index 00000000..a258726e --- /dev/null +++ b/apps/app/src/assets/styles/tailwind.css @@ -0,0 +1,14 @@ +/* Tailwind v4 CSS-first entry. Imports the framework and the + * tailwindcss-primeui plugin (semantic-token utilities that map + * PrimeVue Aura tokens like {primary.500} to Tailwind classes + * like bg-primary-500). + * + * Per Tailwind v4 with @tailwindcss/vite, the @source directive + * tells the plugin where to scan template content — we point it at + * apps/app/src/. Existing Vuetify/Vuexy SCSS stays untouched and is + * imported separately from main.ts. + */ + +@import "tailwindcss"; +@plugin "tailwindcss-primeui"; +@source "../../**/*.{vue,ts,js,tsx,jsx}"; diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts index ff544415..2e9c479c 100644 --- a/apps/app/src/main.ts +++ b/apps/app/src/main.ts @@ -8,6 +8,7 @@ import App from '@/App.vue' import { registerPlugins } from '@core/utils/plugins' // Styles +import '@styles/tailwind.css' import '@core/scss/template/index.scss' import '@styles/styles.scss' diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts index 41dd4f6f..26b954d6 100644 --- a/apps/app/vite.config.ts +++ b/apps/app/vite.config.ts @@ -12,6 +12,7 @@ import { defineConfig } from 'vite' import VueDevTools from 'vite-plugin-vue-devtools' import MetaLayouts from 'vite-plugin-vue-meta-layouts' import vuetify from 'vite-plugin-vuetify' +import tailwindcss from '@tailwindcss/vite' import svgLoader from 'vite-svg-loader' // https://vitejs.dev/config/ @@ -31,6 +32,11 @@ export default defineConfig({ VueDevTools(), vueJsx(), + // Tailwind v4 (F3 — parallel-mode with Vuetify until F6). Placed after + // vue() so it sees compiled template content; placed before vuetify() + // so Vuetify's SCSS pipeline runs unimpeded. + tailwindcss(), + // Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin vuetify({ styles: {