I've got a project with Vite (vanilla) TypeScript with TailwindCSS. I have there a custom element, like this:
import {globalStyleSheet} from '../styles/global-style-sheet.ts';
class CardComponent extends HTMLElement {
static get observedAttributes() {
return ['header', 'text'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
(this.shadowRoot as ShadowRoot).adoptedStyleSheets = [globalStyleSheet];
this.render();
}
attributeChangedCallback() {
this.render();
}
render() {
const header = this.getAttribute('header') || '';
const text = this.getAttribute('text') || '';
this.shadowRoot!.innerHTML = `
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white p-6">
<div class="font-bold text-xl mb-2">${header}</div>
<p class="text-gray-700 text-base">${text}</p>
</div>
`;
}
}
customElements.define('card-component', CardComponent);
global-style-sheet.ts
import globalCss from '../style.css?raw'
const cssStyleSheet = new CSSStyleSheet();
cssStyleSheet.replaceSync(globalCss);
export const globalStyleSheet = cssStyleSheet;
style.css
@import "tailwindcss";
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
Now, the Vite dev server serves the style.css
file, as a JS file. How can I get the computed tailwind classes from the Vite dev server?
These are the relevant dependencies:
{
"dependencies": {
"@tailwindcss/vite": "^4.1.11",
"@types/node": "^24.0.7",
"tailwindcss": "^4.1.11",
"typescript": "~5.8.3",
"vite": "^7.0.0"
}
}
You need to use ?inline
there instead of ?raw
. Docs: https://vite.dev/guide/features.html#disabling-css-injection-into-the-page
Using ?raw
will just serialize the original file content and export it. With ?inline
, it passes through the vite plugins and is serialized to default export after all other transforms are done.