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.
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;
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.
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
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`...`].
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.
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.
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;
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.
Wouldn't the browser actually deduplicate the link element based on the URL? It shouldn't have multiple copies of it, just one.
Has anyone got it working with vite js yet?
I need to get my head around Vite - might give it a try! Cheers Mark
There is a new version called twlitme that works for me using vite
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
Nice I like it! 🙂
Thanks for the demo. Does that mean that each component carries all other components' styles? Or I'm missing something?
Should be no duplication in this case - the constructable style sheets provide this for us. Cheers Mark
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`...`].
Nice I like it 🙂
i will use pretty useful but you need some Readme
Will check it out, cheers Mark
Very useful, though demonstrates why I hate build tools 😉
fair point 🙂
Vanilla CSS...off with the training wheels!
fair point :-)
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.
thank you for this video :)
No problem 😊 Cheers Mark
Your solution is just way too *KLUNKY* . Why not use *ONLY* global stylesheets. All css is in one place !