feat(lit-dev-content): add lit-with-tailwind guide

[43081j]

This adds a guide for using tailwind (and similar libraries) with lit components.

For now, using the older import assertions proposal since esbuild doesn't yet support import attributes out of the box it seems.

for the author meta, i just dumped my twitter avatar in with the other images and updated the json. hopefully that works, i don't have many photos lying around 😂

[augustjk]

/gcbrun

preview URL: https://pr1278-81e742c---lit-dev-5ftespv5na-uc.a.run.app/articles/lit-with-tailwind/

[redfox-mx]

Hi! @43081j, @augustjk. Nice to meet you!

Today I just reviewed t39/import-attributes support and I noticed that the spec was updated and the previous 'with' keyword came back. So... I think maybe we need to wait for a little (with stability in mind) and see how the ecosystem moves.

PS: I was surfing and I find this PR 🤣, sorry for any inconvenience

[43081j]

I have mentioned that in the article

esbuild doesn't seem to support the latest standard out of the box, so the article still uses assert, but does mention with should be used when possible

I don't think we need to wait. It is pretty much settled now on import attributes (with)

[augustjk]

I don't think we need to wait. It is pretty much settled now on import attributes (with)

Agreed. I think it's fine to publish now with the notes and update when we can.

[augustjk]

Thank you! A few suggestions for typo and questions for my understanding of the solution.

It would also be nice to have a thumbnail to show up on https://pr1278-81e742c---lit-dev-5ftespv5na-uc.a.run.app/learn/

Normally I'd ask Andrew for his artistic talents but he's off on vacation til next year. Maybe it won't be hard to throw together something with the Lit and Tailwind logos. Time to bring out my MSPaint skills?

[augustjk]

So I'm not too familiar with features in this area and this is more for my understanding of what's going on.

Looking at the output from the example repo, esbuild produces this line in the bundle

import styles from "./hello-world-4K4DCJGM.css" assert { type: "css" };

esbuild is being used to bundle and move the css files into the outdir and is it then left up to the users to make this work on unsupported browsers? We probably need a loud caveat stating this only works in Chrome if that's the case. Can es-module-shims be used to make it work for other browser?

Might there be rollup plugins that work with the new correct import attribute syntax?

[augustjk]

hmmm... latest esbuild actually does support import attributes with the with keyword. https://github.com/evanw/esbuild/releases/tag/v0.19.7

evanw/esbuild#3384 (comment) Evan does say type: 'css' support will come to esbuild eventually but perhaps a plugin can be written for it in the mean time?

[43081j]

yeah pretty much, right now it just outputs the source as-is (i.e. your browser needs to support import assertions at least, ideally attributes too).

the esbuild blockage is because of no support for CSS. you're right though, we may be able to use a plugin, i'll have a dig around

it'd be nice to not have to use rollup, just because it consumes most of the build whereas esbuild focuses on only the bundling (as in we should also do the tailwind preprocessing in rollup, if we use rollup).

[augustjk]

that makes sense. i don't disagree with the tool choice and i don't want to block or dictate too much as to what this article should say.

since this article being the first of its kind, i think it would be good to convey to the reader that this is meant as one way to solve this problem, with caveats like browser support, and mention alternatives (even without details) like using rollup plugins for all the steps. being published on lit.dev, people might consider this the only recommended way otherwise.

[e111077]

Heya, seeing how with is shipped in chrome now + TS 5.4 supporting it, can we switch to with?

[justinfagnani]

Thanks for the article @43081j !!

[e111077]

I LOVE the image you have but there might be a potential legal issue:

https://tailwindcss.com/brand

Their brand guidance states:

You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc.

I think inclusion of the logo like this can be construed as an endorsement. Maybe you can use the literal unicode ≈ as an alternative and standard arial or Manrope text. Or just Lit + Tailwind with Manrope font or standard arial

[e111077]

Heya, seeing how with is shipped in chrome now + TS 5.4 supporting it, can we switch to with?

[e111077]

can we do a link that's like:

[Source](https://github.com/43081j/tailwind-lit-example)
[Live demo](https://githubblitz.com/43081j/tailwind-lit-example)

All you would also need to do is have a start npm command that starts a server so that we can serve it like with WDS.

Here is an example with wds and a dev command:

https://stackblitz.com/edit/github-8tsp9c?file=src%2Fhello-world.ts

[43081j]

I'll try get the branch caught up and see if everything now works fine with import attributes

A designer friend of mine made the image. I'll ask her nicely and see if she can update 😅

I think it would make sense to just use text for the tailwind part and drop the logo

[43081j]

we're in a bit of a pickle with a stackblitz example 😬

it seems we can't use with until CSS modules are a thing. esbuild won't implement it, so it'll just throw a build error if you try use it unless you write a plugin for it.

i don't really want to get everyone to duplicate an esbuild plugin for something that should really work out of the box

but i can't put it back to asserts because browsers won't support that 🤔