Getting Started

Configuration

BuyAstro templates are built using Astro, Tailwind CSS, and Alpine.js, with React being used occasionally. This page will walk you through the configuration process of these tools.

Tailwind CSS Configuration

Tailwind CSS is used for styling throughout the BuyAstro templates. You can adjust its configuration by editing the tailwind.config.js file in your project.

Here’s how the Tailwind config file looks by default:

module.exports = {
  content: ["./src/**/*.{astro,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#ff8c00',
      },
    },
  },
  plugins: [],
}

You can extend the theme, add custom colors, or use plugins as needed. Refer to the Tailwind documentation for more options.

Astro Configuration

Astro is the core framework used in BuyAstro templates. You can configure it by modifying the astro.config.mjs file located in your project root.

Here’s a basic configuration for Astro:

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";

export default defineConfig({
integrations: [tailwind(), react()],
build: {
  site: "https://buyastro.website",
  output: "static",
},
});

This config file integrates Tailwind and React. The site option specifies your website’s URL, and the output option defines the build output type, which is static in this case.

Alpine.js Integration

Alpine.js is used for lightweight interactivity. You can add Alpine.js by importing it directly in your layout files or specific components as needed.

Here’s an example of how you might include Alpine.js in an Astro component:

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">
    Content is now visible!
  </div>
</div>

Alpine.js is straightforward to use for handling simple UI interactions.

React Components (Occasional)

React is only used sparingly in BuyAstro, typically for more complex components. You can use React components inside Astro templates by integrating the @astrojs/react plugin in the astro.config.mjs.

Here’s an example of how to render a React component inside an Astro file:

---
import ReactComponent from '../components/ReactComponent.jsx';
---
<ReactComponent />

Make sure to install the necessary React dependencies if you’re adding new components.

General Development

You’ll spend most of your time writing HTML, CSS (via Tailwind), and JavaScript (via Alpine.js). You can always extend the configuration as needed, but the default setup should be sufficient for most projects.