Run the following command to create a new Astro project:

Select your preferred starter template when prompted.

To add Preact to your Astro project, execute:

Type y for all questions to confirm the installation.

Follow the instructions in the Astro Tailwind CSS Guide to add Tailwind CSS.

Run the following command

Update astro.config.mjs

Import the Tailwind integration in yourastro.config.mjsfile and add it to theintegrationsarray:

Configure Tailwind CSS

Add the following basic configuration to yourtailwind.config.jsfile:

Modify yourtsconfig.jsonto include the following settings:

Install the Node.js types as a development dependency:

Update astro.config.mjs

Make the following changes to yourastro.config.mjs:

Add the following overrides to yourpackage.json:

Run the following command to install additional dependencies:

Modify yourtailwind.config.jsto include dark mode and extend the theme:

Add Base Styles

Create a CSS file (e.g.,styles.css) and add the following base styles:

To copy the UI components, run the following command: