Tailvite
Description
Tailvite is a Drupal 9 starterkit theme with Atomic Design structure, inspired by Emulsify, but using Vite instead of Webpack, TailwindCSS components instead of BEM and AlpineJS instead of jQuery.
Aim
To be fast and fun and simple
Stack
- Drupal 9
- Vite
- TailwindCSS 3 (alpha)
- AlpineJS 3
Installation
- Check the doc
Inspiration
- https://tailwindcss.com/docs/guides/vue-3-vite
- https://github.com/emulsify-ds/emulsify-drupal
- https://github.com/chkilel/vitewind-theme
- https://github.com/segovia94/drupal-vite-poc
Requiered Drupal modules
- Components: https://drupal.org/project/components
- Bamboo Twig: https://drupal.org/project/bamboo_twig
- Simplify Menu: https://drupal.org/project/simplify_menu
Recommended Drupal modules
- Single File Components: https://drupal.org/project/sfc
- External-use Icons: https://drupal.org/project/ex_icons
To evaluate/integrate
- https://github.com/arnoson/vite-plugin-live-reload
- https://github.com/tanc/vite-plugin-sfc-reload
- https://github.com/cereschen/vite-plugin-svg-sprite-component
To do
- Complete basic components theming
- Check ESLint & Prettier setup + config
Patch
- https://www.drupal.org/project/sfc/issues/3205989 (if using https://github.com/tanc/vite-plugin-sfc-reload)
Coming soon
- Dark Mode