More Premium Hugo Themes Premium Astro Themes

Astro Tailwind Flowbite Template

An Astro site for simple pages that pulls data from a json file

Astro Tailwind Flowbite Template

An Astro site for simple pages that pulls data from a json file

Author Avatar Theme by leabs
Github Stars Github Stars: 68
Last Commit Last Commit: Sep 29, 2024 -
First Commit Created: Dec 18, 2023 -
Astro Tailwind Flowbite Template screenshot

Overview

Astro Tailwind Flowbite Template is a website template that combines Astro 3.0 and Tailwind to create static websites for smaller projects. It offers a fast and simple way to build static sites for friends or small businesses. The template utilizes the features of Astro 3.0, such as View Transitions API support, automatic asset optimization, and improved build output. It is a work in progress and welcomes contributions for improvements.

Features

  • Integration of Astro 3.0 and Tailwind
  • View Transitions API support
  • Automatic asset optimization
  • Improved build output
  • Easy customization of site contents
  • Component library using Flowbite and Tailwind CSS
  • Easy replacement of site logo and favicon
  • Ability to add pages with navigation option
  • Customization of site colors
  • Easy contribution through pull requests

Installation

To install the Astro Tailwind Flowbite Template, follow these steps:

  1. Clone or fork the repository.
  2. Run npm install to install all the dependencies.
  3. Run npm run dev to start the dev server.
  4. Open your browser and go to http://localhost:4321/ to view the site.

To change the site contents, modify the src/data/site.json file. You can change the site title, description, social media links, and more in this file.

To add pages, create a new file in the src/pages directory with the name pagename.astro. Import the Layout and any required variables in the new page file. Don’t forget to add the page to the src/data/site.json in the pages array for it to appear in the navigation.

To add components, add them to the src/components directory and import them into your page.

To change the site logo, replace the image in assets/logo.png with your own logo. Adjust the width and height in the components/Nav.astro file if necessary.

To change the site favicon, replace the image in public/favicon.svg with your own.

Site images should be added to the assets directory. Set their image name in src/data/site.json in the projects array. You can also set the project title, description, and link in this file.

Site colors can be customized by modifying the tailwind.config.cjs file.

Summary

Astro Tailwind Flowbite Template is a website template that combines Astro 3.0 and Tailwind to create static websites for smaller projects. With features such as View Transitions API support, automatic asset optimization, and improved build output, it offers a fast and simple solution for building static sites. The template allows for easy customization of site contents, addition of pages and components, and customization of site colors. It welcomes contributions and follows guidelines to ensure clean and consistent code. The project is licensed under the MIT License.