Documentation

Theme Architecture

All themes follow a consistent structure and are updated to Tailwind CSS V4.

Note: Lifetime Access purchasers have access to individual theme repositories, including Tailwind CSS V3 versions and versions without reusable components, available via commit history.

The Structure

• Components Directory: Houses all reusable UI components that can be imported across pages and layouts.
• Layouts Directory: Contains template files that define the overall page structure and are shared across multiple pages.
• Pages Directory: Each file becomes a route in your site. Astro uses file-based routing.
• Content Directory: Stores markdown files and content collections for blogs, documentation, or other content-driven pages.
• Styles Directory: Global CSS files, including Tailwind imports and custom styles.

File Structure (Tailwind V4)

├── public/ # Static assets if any
├── src/
│ ├── components/ # Reusable components
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route pages
│ ├── content/ # Content collections
│ │ ├── folders/ # Collection folders
│ │ └── config.ts # Collection configuration
│ ├── data/ # Data files
│ ├── scripts/ # JavaScript utilities
│ ├── styles/
│ │ └── global.css # Global styles with Tailwind
│ └── env.d.ts # TypeScript definitions
├── .pages.yml # PagesCMS configuration. Use it if you want.
├── astro.config.mjs # Astro configuration
├── package.json
├── README.md
└── tsconfig.json

Plugins and Integrations

Each theme includes carefully selected plugins as needed. Check the astro.config.mjs or the global.css file for the complete list of plugins and integrations used in your specific theme.

Common:

• tailwindcss/forms
• tailwindcss/typography
• tailwind-scrollbar-hide
• @astrolib/seo
• @astrojs/mdx

Themes are kept lightweight with only the needed essentials to avoid bloat and give you control over additional features.

Theme philosophy

The themes are built with these principles in mind:

• Consistency: All themes follow the same architectural patterns
• Flexibility: Components can be easily customized and extended
• Performance: Minimal dependencies and optimized code
• Developer Experience: Clear structure and documentation
• Future-proof: Regular updates with latest best practices