Add example of a panel with tailwind css styling

[foxymiles]

Public-Facing Changes

Add an example of a panel using Tailwind to do styling.

Description

Since this is likely to be a popular option it seems worthwhile to add an example to help people get started since the setup can be difficult.

[foxymiles]

Is .pcss a common thing? I've never seen that before. Is this going to be a recognized CSS file in editors? I've found a few references to this online but nothing that looked "official" at first search.

No I made it up. We need a different file extension here so it doesn't clash with the .css handler we have in the core webpack config for convenience. In theory users shouldn't need to add anything here though if they're using tailwind. We could use any extension we want here if we think .pcss is confusing.

[foxymiles]

We added this for convenience so panel authors could import CSS without having to write any webpack config but it clashes with the definition we need here:

https://github.com/foxglove/create-foxglove-extension/blob/8b310dcd120bdd84a9e1047e45cff55d2ac12022/src/webpackConfigExtension.ts#L63-L66

[defunctzombie]

No I made it up. We need a different file extension here so it doesn't clash with the .css handler we have in the core webpack config for convenience. In theory users shouldn't need to add anything here though if they're using tailwind. We could use any extension we want here if we think .pcss is confusing.

I'm not a fan of this. This will be non-obvious to users since its a made-up extension so if the norm for tailwind users is .css files then we need an example that does that or no example at all. A made-up file extension does not seem appropriate to me.

[foxymiles]

IMO a working example with a somewhat nonstandard config is better than no sample at all. Especially given that in most cases users will never need to monkey with this. Open to other approaches though.

[defunctzombie]

What would it take to make this example work in a more standard manner? I think without a tradeoff consideration here to understand what it would take to make this work in a natural way and why we should accept this non-standard approach all of the sudden.

[foxymiles]

The standard webpack setup for tailwind & postcss is like this:

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
}```

But since we already have a CSS loader set up we can't just add this to the rules in the `config.ts`. We could also I guess update the config.ts to remove the default rule and replace it with this but that seems a bit hacky.

[defunctzombie]

We could also I guess update the config.ts to remove the default rule and replace it with this but that seems a bit hacky

Why's that hacky? I think that's what I've experienced with other environments that provided built-in handling of certain file types. I'd like to see an example that does it to evaluate how "hacky" it is.

Related question - ship post-css as a builtin thing? Or maybe that's overkill and not great to push on users?

[foxymiles]

Why's that hacky? I think that's what I've experienced with other environments that provided built-in handling of certain file types. I'd like to see an example that does it to evaluate how "hacky" it is.

I can push a commit to demonstrate that and you can see what you think.

Related question - ship post-css as a builtin thing? Or maybe that's overkill and not great to push on users?

Worth considering. If we do maybe provide a slightly more straightforward way of overriding it?