feat(tailwind): install Tailwind v4 alongside Vuetify (parallel mode)
Three additions wire Tailwind v4 into the SPA without disturbing the existing Vuetify pipeline: - apps/app/src/assets/styles/tailwind.css — Tailwind v4 CSS-first entry. Uses @import "tailwindcss"; @plugin "tailwindcss-primeui"; and @source pointing at apps/app/src/ to scan template content. - apps/app/vite.config.ts — adds the @tailwindcss/vite plugin between vue() and vuetify(). After vue() so it sees compiled template content; before vuetify() so Vuetify's SCSS pipeline runs unimpeded. - apps/app/src/main.ts — imports tailwind.css before the Vuetify/Vuexy SCSS so utility classes are available alongside Vuetify's cascade. optimizeDeps.exclude remains ['vuetify'] (no PrimeVue addition) — HMR behaves correctly in dev with the current config; revisit if needed. Verification: - pnpm typecheck — clean. - pnpm build — succeeds in 13.97s; CSS emitted per-route as expected. - pnpm test — 402 tests pass unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
14
apps/app/src/assets/styles/tailwind.css
Normal file
14
apps/app/src/assets/styles/tailwind.css
Normal file
@@ -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}";
|
||||||
@@ -8,6 +8,7 @@ import App from '@/App.vue'
|
|||||||
import { registerPlugins } from '@core/utils/plugins'
|
import { registerPlugins } from '@core/utils/plugins'
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
|
import '@styles/tailwind.css'
|
||||||
import '@core/scss/template/index.scss'
|
import '@core/scss/template/index.scss'
|
||||||
import '@styles/styles.scss'
|
import '@styles/styles.scss'
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { defineConfig } from 'vite'
|
|||||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||||
import MetaLayouts from 'vite-plugin-vue-meta-layouts'
|
import MetaLayouts from 'vite-plugin-vue-meta-layouts'
|
||||||
import vuetify from 'vite-plugin-vuetify'
|
import vuetify from 'vite-plugin-vuetify'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
import svgLoader from 'vite-svg-loader'
|
import svgLoader from 'vite-svg-loader'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
@@ -31,6 +32,11 @@ export default defineConfig({
|
|||||||
VueDevTools(),
|
VueDevTools(),
|
||||||
vueJsx(),
|
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
|
// Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
|
||||||
vuetify({
|
vuetify({
|
||||||
styles: {
|
styles: {
|
||||||
|
|||||||
Reference in New Issue
Block a user