Blocks not showing styling correctly. #3552

taylorrobert · 2025-02-11T13:33:17Z

taylorrobert
Feb 11, 2025

My blocks do not show any styling, and I cannot figure out why.

As you can see, I have rendered a button at the top left, which does appear to be styled. However, copying and pasting the block code renders with little or no styling. There are no console errors.

I am running Vue with Vite, and have installed Tailwind according to the documentation here. Then I finished the config from the documentation here.

The docs really leave a lot to be desired... this really needs to be fixed. I have spent an entire day trying to get these up and running from various sources. The documentation seems incredibly simplistic for how opaque this setup process actually is, so any help would be appreciated.

Here are the relevant files:

index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    <link href="./src/styles/styles.css" rel="stylesheet">
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

</html>

styles.css

@import "tailwindcss";

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {createRouter} from "./router";
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
import StyleClass from "primevue/styleclass";



const app = createApp(App);

app.directive('styleclass', StyleClass)

app.use(PrimeVue, {
        theme: {
            preset: Aura
        }
    });

app.use(createRouter(app));

app.mount('#app');

App.vue

<script setup lang="ts"></script>
<template>
  <Button label="Test" severity="success" raised/>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <MainSiteContainer/>
</template>

<style scoped></style>

MainSiteContainer.vue

<template>
  ...lots of HTML directly copied from a block
</template>
<script setup>
import OverlayBadge from 'primevue/overlaybadge';
</script>

tailwind.config.ts (not sure if this is doing anything?)

export default {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    plugins: [require('tailwindcss-primeui')]
}

package.json

{
  "name": "convogen-web",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@auth0/auth0-vue": "^2.4.0",
    "@primevue/themes": "^4.2.5",
    "font-awesome": "^4.7.0",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.5",
    "tailwindcss-primeui": "^0.4.0",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@primevue/auto-import-resolver": "^4.2.5",
    "@tailwindcss/vite": "^4.0.6",
    "@types/node": "^22.13.1",
    "@types/vue-router": "^2.0.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "tailwindcss": "^4.0.6",
    "typescript": "~5.7.2",
    "unplugin-vue-components": "^28.0.0",
    "vite": "^6.1.0",
    "vite-plugin-mkcert": "^1.17.6",
    "vue-tsc": "^2.2.0"
  }
}

vite.config.ts

export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [
                PrimeVueResolver()
            ]
        }),
        tailwindcss()
    ],
    server: {
        port: 3006
    }
})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

Blocks not showing styling correctly. #3552

{{title}}

Replies: 0 comments

Select a reply

PrimeTek

Blocks not showing styling correctly. #3552

taylorrobert Feb 11, 2025

Replies: 0 comments

taylorrobert
Feb 11, 2025