File and folder structure

1. /assets - Development Resources & Starter Kits

Contains foundational files for recipes and Storybook integration.

text
/assets/
├── /recipes/                 # Ready-to-use configuration examples
│   ├── /tailpine_block/     # Block-based recipes
│   │   ├── /config/         # Block configuration files
│   │   └── /content/        # Default page content for blocks
│   ├── /tailpine_paragraph/ # Paragraph component recipes
│   │   ├── /config/         # Paragraph configuration
│   │   └── /content/        # Paragraph content examples
│   └── recipes.yml          # Configuration entity references
└── /storybook/              # Storybook setup files

Purpose: Quick setup of demo content and component previews during development.

2. /commands - Automation & Management

PHP command files for theme and subtheme management.

Key Files:

  • SubthemeCommand.php - Logic for creating subthemes from Tailpine

  • ThemeSetupCommand.php - Handles initial theme configuration

Automation Features:

  • Enables and configures the theme

  • Sets up Storybook for UI component previews

  • Moves required assets to project root

  • Configures development services

3. /components - Modern Component Architecture

Single Directory Components (SDCs) for reusable UI elements.

text
/components/
└── /component/              # Self-contained components
    ├── component.twig       # Template
    ├── component.css        # Styles
    ├── component.js         # JavaScript (optional)
    └── component.yml        # Configuration

Benefits: Isolated, maintainable, and reusable UI components.

4. /config - Theme Configuration & Settings

Configuration files for theme initialization and customization.

text
/config/
├── /install/    # Initial setup configurations
│   ├── menu setup
│   ├── footer configuration
│   └── default color schemes
└── /scheme/     # Extended theme settings
    └── color scheme selections

5. /images - Visual Assets

All image resources used throughout the theme.

  • Icons

  • Social media icons

  • Graphic elements

6. /css - Styling & Design System

Tailwind CSS configuration and compiled styles.

  • Tailwind configuration files

  • Compiled CSS output

  • Custom utility classes

7. /js - Interactive Functionality

JavaScript files for dynamic behavior.

  • Menu interactions

  • Sliders and carousels

  • Form enhancements

  • Other front-end interactions

8. /layout - Layout Builder Templates

Pre-built layouts for Drupal's Layout Builder.

Available Layouts:

  • One Column Layout - Full-width content

  • Two Column Layout - Sidebar + content

  • Three Column Layout - Complex page structures

9. /src - Core Theme Logic

Source code for theme utilities and subtheme generation.

Key Capability:

command
# Create subthemes with Drush
ddev drush --include="web/themes/contrib/tailpine" tailpine:create Subtheme_Name

10. /templates - Twig Templates

Template files that define how Drupal content is rendered.

  • Region templates

  • Component wrappers

  • Page layouts