Preact + Tailwind + Docker not working properly

[befabry]

What version of Tailwind CSS are you using?

3.4.16

What build tool (or framework if it abstracts the build tool) are you using?

• vite 6.0.3, tested on v5, same behaviour
• Docker, latest version

What version of Node.js are you using?

v23.4.0, tested on v22.12.0, same behaviour

What browser are you using?

Firefox mainly, tested on Vivaldi (chromium based), same behaviour

What operating system are you using?

Linux

Describe your issue

Hello,

I tried to integrate TailwindCSS in my pet project but I'm having a hard time. It worked for 1 evening, then it didn't and I have absolutely no idea why.

I followed the official modus operandi here which is quite straightforward, I also tinkered with what I could find on SO or this discussion on React. Nothing solved my problem.

I updated Vite and all dependencies to the latest but the problem persists.

package.json :

{
	"name": "caddie-backend-preact",
	"version": "0.0.1",
	"private": true,
	"type": "module",
	"license": "UNLICENSED",
	"scripts": {
		"dev": "vite --host 0.0.0.0",
		"build": "vite build",
		"lint": "eslint --fix \"{src,apps,libs,test}/**/*.{ts,tsx}\"",
		"preview": "vite preview"
	},
	"dependencies": {
		"@preact/signals": "^1.3.1",
		"preact": "^10.25.1",
		"preact-iso": "^2.8.1",
		"react-hook-form": "^7.54.0"
	},
	"devDependencies": {
		"@eslint/compat": "^1.2.4",
		"@eslint/eslintrc": "^3.2.0",
		"@eslint/js": "^9.16.0",
		"@preact/preset-vite": "^2.9.3",
		"@types/eslint__eslintrc": "^2.1.2",
		"@typescript-eslint/eslint-plugin": "^8.18.0",
		"@typescript-eslint/parser": "^8.18.0",
		"autoprefixer": "^10.4.20",
		"eslint": "^9.16.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-import-resolver-typescript": "^3.7.0",
		"eslint-plugin-import": "^2.31.0",
		"eslint-plugin-prettier": "^5.2.1",
		"eslint-plugin-react": "^7.37.2",
		"globals": "^15.13.0",
		"postcss": "^8.4.49",
		"postcss-cli": "^11.0.0",
		"prettier": "^3.4.2",
		"tailwindcss": "^3.4.16",
		"typescript": "^5.7.2",
		"vite": "^6.0.3",
		"vite-tsconfig-paths": "^5.1.4"
	}
}

postcss.config.mjs :

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.mjs :

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {
      colors: {
        text: '#cad3f5',
        subtext1: '#b8c0e0',
        subtext0: '#a5adcb',
        overlay2: '#939ab7',
        overlay1: '#8087a2',
        overlay0: '#6e738d',
        surface2: '#5b6078',
        surface1: '#494d64',
        surface0: '#363a4f',
        base: '#24273a',
        mantle: '#1e2030',
        crust: '#181926',
        yellow: '#eed49f',
        green: '#a6da95',
        sapphire: '#7dc4e4',
        teal: '#8bd5ca',
        sky: '#91d7e3',
        blue: '#8aadf4',
        lavender: '#b7bdf8',
        peach: '#f5a97f',
        maroon: '#ee99a0',
        red: '#ed8796',
        mauve: '#c6a0f6',
        pink: '#f5bde6',
        flamingo: '#f0c6c6',
        rose: '#f4dbd6',
      },
    },
  },
  plugins: [],
};

vite.config.ts :

// eslint-disable-next-line import/no-named-as-default
import preact from '@preact/preset-vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), tsconfigPaths()],
  server: {
    proxy: {
      '/api': {
        target: 'http://backend:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy) => {
          proxy.on('error', (err) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (_proxyReq, req) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      },
    },
  },
});

I have to import the cdn in my index.html, but all modifications aren't applied properly as far as I gathered.

index.html :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="color-scheme" content="light dark" />
		<script src="https://cdn.tailwindcss.com"></script>
		<title>Vite + Preact</title>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/index.tsx"></script>
	</body>
</html>

If you think this is easier to look at the repo, you can find the code here

It's supposed to look like this :

but it is currently looking like this without the CDN :

No errors appearing on my console :

Thanks for your help

[wongjn]

You have an empty presets value and as per the documentation:

If you’d like to completely disable the default configuration and start with no base configuration at all, set presets to an empty array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  // ...
}

This will completely disable all of Tailwind’s defaults, so no colors, font families, font sizes, spacing values, etc. will be generated at all.

This means that most of the classes in src/pages/Home/index.tsx et. al. don't correspond to valid Tailwind values anymore. You could consider removing the presets: [] line from your Tailwind configuration to restore the default Tailwind values.

[befabry]

Oh dang it, that's it. Thank you very much kind sir !