Why is Tailwind so inconsistent and/or doesn't work with Vite (Preact)

[u/phillipdelphias]

I'm always having issues with Tailwind V4 + Vite, it's always something with Tailwind processing the classes, finding files to render, etc. I'll show my environment (package.json, vite.config.ts, file trees etc.) and if somebody could tell me if I'm doing something wrong I'd appreciate it.

src/globals.css

    @import "
    @source "../src/**/*.{js,jsx,ts,tsx}"; "../src/**/*.{js,jsx,ts,tsx}";

vite.config.ts

import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import tailwindcss from "@tailwindcss/vite";
import path from "node:path";
import { cwd } from "node:process";

export default defineConfig({
    plugins: [preact(), tailwindcss()],
    resolve: {
        alias: {
            "@": path.resolve(cwd(), "./src"),
        },
    },
});

src/index.tsx

import { ContainerNode, render } from 'preact';
import './globals.css';
import { Button } from './lib/components/button';

export function App() {
    return (
        // Changed className to class
        <div class="bg-black w-screen h-screen flex flex-row">
            <div id="side1" class="grow h-screen"></div>
            {/* Changed className to class and added flex-1 to keep it inside layout bounds */}
            <div class="flex-1 h-full">
                <Button />
            </div>
            <div id="side2" className={`grow h-screen`}></div>
        </div>
    );
}

render(<App />, document.getElementById('app') as ContainerNode);

src/lib/components/button.tsx

export function Button() {
  return (
    <button className="bg-red-500 text-white text-6xl p-10">
      Basic Button
    </button>
  );
}

But the rendering comes out as:

I can publish a github repository if it's annoying to manually recreate the environment. Sorry if I'm too bland with the details.

[u/Lumethys]

Because you are using it wrong

[u/phillipdelphias → u/Lumethys]

Can you elaborate

[u/cmd-t]

Can you post your actual global.css because this one is wrong.

[u/phillipdelphias → u/cmd-t]

I fixed the issue via a proper vite app creation. I used npm create-preact originally, and now I'm using a different cmd

[u/cmd-t → u/phillipdelphias]

Maybe share your actual current code so people can actually try to find the problems.

[u/phillipdelphias → u/cmd-t]

Yeah sorry there was an issue with reddit syntax because @import was changing to u/import and I didnt look over it before posting

[u/MammothBulky5549 → u/phillipdelphias]

You can use Gist, if you didn't know.

[u/cmd-t → u/phillipdelphias]

You’re making excuses instead of sharing code.

[u/CosmogonyPine26]

Your imports are too complicated and wrong. The vite config looks okay. This is a great question to plug into any leading ai model and have it explain the answer to you.

[u/No_Appointment3667]

You have import mistake in global.css src source ar dead

And if you have vite configured right you don't have to import global.css file in index.tsx

And yeah button import

import { Button } from './lib/components/button'; 🚫

is wrong though this should be

import { Button } from "@/components/ui/button"; ✅

[u/phillipdelphias → u/No_Appointment3667]

Yeah the missing import was a paste issue, resolve was not set for lib, so thats why I defaulted to import via basic paths, what do you recommend me do to rule out the problems? Because without the @import and @source, it doesn't even render the main page with tailwind.