Migrate Tailwind example from postcss to vite plugin

[katywings]

Currently our tailwind example project still uses the postcss integration. Lets discuss if we should change it to the new recommended tailwind vite plugin.

Pros:

• Recommended by Tailwind
• Better performance
• Fewer config files
• Can include the bottom source("../src") fix by default, guarding users from problems, that they otherwise might have by migrating manually

Cons:

• New, less tried and battle-tested technology 😅

Extra infos

The vite plugin only works with SolidStart by importing tailwind in the css file like this:

@import "tailwindcss" source("../src");

Without that explicit source("../src"), client & server builds will generate different css files, which results in mismatching file names and broken <link> hrefs. More info: tailwindlabs/tailwindcss#16389

[Tyg-g]

Yeah, when I started with SolidJS a few months ago, I struggled a lot with outdated examples and guides. This one is one of those.

Sometimes it was because of SolidJS' rapid development (changing API), but other times it was because outdated dependencies, like Tailwind 3. Tailwind 4 does some things differently. I only could get it going by using @tailwindcss/vite and let it handle all the other stuff internally.

As a newcomer...

The current situation is that SolidJS is quite new, and SolidStart is totally new. They are awesome projects, easy to like their philosophy. But there aren't many good examples, explanations or conversations about common developer issues. The official docs aren't too verbose either.

So the onboarding experience of a newcomer is quite bumpy sprinkled with frustrations. I think, in this early stage when there are limited resources, it's quite important to have at least the basic examples and docs up-to-date and rock solid.

This is my input to this topic as an outsider.