tailwind-cssvitetailwind-css-4devserver

How to serve the style.css file as an actual CSS file?


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"
  }
}

Solution

  • 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.