This is a demo on how to use Vite + Tailwind + Vanilla Web Components to create a super-fast web site without the need for a heavy framework like React or Vue, or even a compiler like Svelte.
We will be using Playwright + Storybook to aid us in our task.
Coming Soon: A rudimentary Flux store, to show that you don't even need Redux, Vuex, or Pinia.
This is an example of a crazy simple menu "app." It consists of several components, as well as a generated content header. For me, this just might be the beginning of my own JS Framework like Vue, but just a web component that you subclass. In fact, that is the way this demo works! There is a base class that contains the logic for linking the js code to the html element, handles shadowroot rendering, and intiating the component's lifecycle. It adds a few functions that make the child classes easier to work with, mainly separating the init step and the render step.
- tailwind doesn't work in the shadow dom
- workaround: use an include in the shadow-dom
style
element (as shown)- BUT: Hot reload doesn't work and I doubt tailwind or vite is going to fix it
- workaround: use an include in the shadow-dom
- Tailwind supports css variables so you can (and should) use them when you feel necessary
- HOWEVER, you should stick to using the tailwind theme to manage most of it.