Using TailwindCSS with LitElement

Подписаться 8 тыс.

Просмотров 3,1 тыс.

50% 1

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

Хобби

Опубликовано:

5 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@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 3 месяца назад

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 3 месяца назад

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 11 месяцев назад

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 11 месяцев назад

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

@MrJIPO1 6 месяцев назад

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.