Vite server does not inject tailwind when initializing from not root directory

142 Views Asked by At

I have Preact application that is running on Vite server.

This is my vite.config.ts:

import { defineConfig } from 'vite';
import * as path from 'path';
import preact from '@preact/preset-vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [preact()],
    base: './',
    build: {
        outDir: '../resources/cef',
        emptyOutDir: true,
        minify: 'esbuild',
        reportCompressedSize: false,
    },
    resolve: {
        alias: [
            { find: '@', replacement: path.resolve(__dirname, './src') },
        ],
    },
});

I have postcss.config.cjs:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}

And tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {},
  plugins: [require("tailwindcss-animate")],
}

This is the way I initialize the application in development mode:

npx vite ./ --clearScreen --host=localhost --port=3000

But for my needs I need to initialize the application from another directory (src-cef is preact root dir)

npx vite ./src-cef --clearScreen --host=localhost --port=3000

And as I run the app in first way (from root directory) everything works fine, but if I declare path manually tailwind doesn't get injected, CSS are not loaded and I am getting following warning

  VITE v4.5.0  ready in 865 ms

  ➜  Local:   http://localhost:3000/
  ➜  press h to show help

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

I tried to declare tailwind.config.js path in vite.config.ts but nothing happened.

0

There are 0 best solutions below