Using TailwindCSS with LitElement

Using TailwindCSS with LitElement is something that takes a little bit of configuration. The issues arise firstly due to ShadowDom which means any Tailwind CSS styles specified in the encompassing projects will not pass through this boundary into our LitElement. So we need to add the Tailwind classes explicitly into our LitElement, and in particualr into the 'Styles' property. This property uses Constructable Style Sheets under the hood and so is the best place for us to place our Tailwindwind classes as any duplication issues are taken care for us.
In the method outlined in this video we use an NPM package 'TWLit' that transforms the standard Tailwind generated CSS file into an importable JS equivalent. This way we can simply import the generated classes into our component and also have them updated in realtime whenever they are updated.
Link to TWLit:
www.npmjs.com/package/twlit
Link to working example:
github.com/MarkJamesHoward/TW...
00:00 Intro
01:50 Create Standard TailwindCSS Setup
03:00 Update Package.JSON
03:15 Add TailwindCSS to Package.JSON
04:00 Add TWLit to Package.JSON
05:00 NPM install TWLit
06:00 Run our Setup
06:50 Update LitElement with TWLit import
07:10 Update LitElement with Static Styles of TWLit

[@LordFunzo]

Thank you for this. Haven taken a freshly generated open-wc project, I was able to use the commands you provided and append them to the existing 'npm start' and it works like a charm. I have to say, 'utility class' libraries, which I do consider to be the best way to build the vast majority of websites, are not in keeping with the web-component 'encapsulation' ethos so doing this is a little bit backwards. What you want is that only the styles used by that component included in that component but this approach makes all TW styles used anywhere available to every component (which is not a problem since no TW styles clash). There is also a problem in you wanting to have some styling exposed to the lightDOM like a reset CSS, you need to find some solution of doing this without including the styling twice, once in plain CSS and again in JS.

[@bedirhangul9964]

thank you for this video :)

[@Ashotofcode]

No problem 😊 Cheers Mark

[@zeusjean]

Hi, first to say that is an excellent job, thank you very much for sharing, just passing by to ask you if there was a possibility to remove all the background that Tailwind generates the 500 lines of CSS that will inherit each component, because each component that is rendered brings with it the style tag with all that tailwind code.

[@Ashotofcode]

Possibly - if you remove the tailwind layers then we should not have any boilerplate code created. So these directives here: @tailwind base; @tailwind components; @tailwind utilities;

[@kyonas6047]

for me I am using elm(the programming language that compiles to Javascript and its main job is doing UI ) So I added Tailwind and Daisy UI and just turned off the shadow dom and now its like a normal html tag I am using Lit to do things that need Javascript mostly Web Api(like indexdb and local storage) so yeah I am loving it im using post css but without the lit postcss its somehow working so that's cool

[@Ashotofcode]

Nice I like it! 🙂

[@jlo214]

Thanks for the demo. Does that mean that each component carries all other components' styles? Or I'm missing something?

[@Ashotofcode]

Should be no duplication in this case - the constructable style sheets provide this for us. Cheers Mark

[@AndrejDaiker]

Has anyone got it working with vite js yet?

[@Ashotofcode]

I need to get my head around Vite - might give it a try! Cheers Mark

[@MrJIPO1]

There is a new version called twlitme that works for me using vite

[@aram5642]

I'm doing a similar thing by creating style-only components, and import their static styles into my presentational components, as in: static styles = [AlertStyles.styles, FormStyles.styles, css`...`].

[@Ashotofcode]

Nice I like it 🙂

[@davidmaxwaterman]

Very useful, though demonstrates why I hate build tools 😉

[@Ashotofcode]

fair point 🙂

[@martinp7841]

Vanilla CSS...off with the training wheels!

[@Ashotofcode]

fair point :-)

[@LordFunzo]

Utility class libraries are not training wheels, they are all you need almost every time and you can still write CSS if needed. Build tools which only include what you use keeps down your CSS payload to a minimum and documentation is fantastic.

[@stanzy237]

i will use pretty useful but you need some Readme

[@Ashotofcode]

Will check it out, cheers Mark

[@ameperdue6953]

Your solution is just way too *KLUNKY* . Why not use *ONLY* global stylesheets. All css is in one place !