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.