Ghost CMS Tailwind CSS Theme Rules: Best Practices for Performance and Scalability

## Theme Organization

**Do:**
Adopt the standard Ghost theme layout with dedicated folders for assets (css, js, images), partials, and core templates like index.hbs, post.hbs, and default.hbs.
*Example:*
```
assets/
  css/
    main.css
  js/
    app.js
partials/
  header.hbs
index.hbs
```

**Don't:**
Scatter files randomly or ignore Ghost's conventions, leading to maintenance issues.
*Example:* Avoid placing CSS directly in root without assets/ folder.

## Component Creation

**Do:**
Build reusable Handlebars partials for components, composing them efficiently and using Ghost helpers like {{content}}.
*Example:*
In partials/card.hbs:
```handlebars
<article class="bg-white p-6 rounded-lg shadow">
  {{{content}}}
</article>
```
Include via {{> card}}.

**Don't:**
Duplicate code across templates or overuse inline styles instead of partials.
*Example:* Never repeat header markup in every page.hbs.

## Routing Setup

**Do:**
Leverage routes.yaml for custom paths, dynamic slugs, and collection templates while handling 404s with error.hbs.
*Example:*
routes.yaml:
```yaml
routes:
  /blog/:slug/:
    template: custom-post
collections:
  /blog/:
    permalink: /blog/{slug}/
```

**Don't:**
Rely solely on default hierarchy without custom routes for complex navigation.
*Example:* Skip routes.yaml for multi-author blogs, causing poor organization.

## Content Handling

**Do:**
Query via Ghost Content API with filters, tags, authors, and pagination for dynamic lists.
*Example:*
```handlebars
{{#foreach posts}}
  <a href="{{url}}">{{title}}</a>
{{/foreach}}
{{pagination}}
```

**Don't:**
Hardcode content or ignore relationships like primary/secondary tags.
*Example:* Avoid static lists; use API for fresh data.

## Performance Boost

**Do:**
Apply lazy loading, defer JS, preload critical assets, and use Ghost's image optimization with Alpine.js for interactivity.
*Example:* `<img src="{{image}}" loading="lazy" class="w-full h-auto">`

**Don't:**
Load heavy scripts synchronously or skip caching.
*Example:* Never use `<script>` without defer/async.

## Tailwind CSS Integration

**Do:**
Purge unused classes, extend themes, and apply responsive utilities directly in templates.
*Example:* `<div class="grid md:grid-cols-3 gap-4 p-8 bg-gradient-to-r from-blue-500 to-purple-600">`

**Don't:**
Use @apply in production or inline custom CSS over utilities.
*Example:* Stick to classes like `text-xl font-bold` not custom rules.

## SEO Optimization

**Do:**
Add Open Graph/Twitter meta, canonical links, and structured data alongside Ghost's built-in SEO.
*Example:*
```handlebars
<meta property="og:title" content="{{title}}">
<link rel="canonical" href="{{url}}">
```

**Don't:**
Omit meta tags or duplicate content without canonicals.
*Example:* Always include for shareable posts.

## Testing and Accessibility

**Do:**
Run GScan, ensure semantic HTML, ARIA roles, and WCAG compliance with keyboard support.
*Example:* `<nav aria-label="Main navigation"> <ul role="list">...</ul></nav>`

**Don't:**
Neglect e2e tests or visual checks for membership flows.
*Example:* Test subscription buttons across browsers.