vite installation
How to install dependencies and structure your app with vite.
1Create project
Start by creating a new Preact project using create-preact:
This guide uses bun as the package manager, but you can also use npm.
2Add Tailwind and its configuration
TailwindCSS version
For now only supports TailwindCSS 3. In the future will support TailwindCSS 4.
Install tailwindcss and its peer dependencies.
Add this import header in your main css file,src/index.css in our case:
Configure template paths in tailwind.config.js:
Configure the postcss file postcss.config.js:
3Edit tsconfig.json file
4Update vite.config.ts
5Add UI components
For now this guide its for the installation of all components at once.
Install all components dependencies:
Copy the folder:
Copy the folder of this reposrc/components/ui into your ui path If you dont change the config guide should be in src/components/ui
Adding custom CSS variables:
Updating tailwind.config.js:
6Done
Setup is complete, and your environment is ready.