Installation & Setup Guide for Tailpine Theme

Before you begin, make sure you’re using DDEV — a Docker-based development environment. All commands should be executed within your DDEV environment.

1. Install the Tailpine Theme

Run the following Composer command to install Tailpine:

command
composer require drupal/tailpine

2. Create a Subtheme

Once Tailpine is installed, create your custom subtheme using Drush:

command
drush --include="web/themes/contrib/tailpine" tailpine:create Subtheme_Name

For example:

command
drush --include="web/themes/contrib/tailpine" tailpine:create subtheme

This will generate a new subtheme that inherits all Tailpine properties. You can now work inside your subtheme for customizations and development.

3. Set Up Tailpine and Enable the Subtheme

Next, run the setup command to enable your subtheme, copy the required recipes, storybook, and image directories, and configure everything automatically:

command
drush --include="web/themes/custom/subtheme" subtheme:setup

This command will also start Storybook for UI component development.

4. Import Required Modules, Configuration, and Content

 

1. Import Blocks Content and Configuration

This command sets up your site with block-based layouts and components.

Command:

command
ddev drush recipe ../recipes/tailpine_blocks

What this does:

  • Enables required modules for block-based layouts

  • Creates and configures block types

  • Imports sample block content

  • Sets up block placement and regions

  • Configures layout builder for block management

  • Builds page layouts using the block system

Use case: Choose this option if you want to build your site primarily using Drupal's block system with Layout Builder.

 

2. Import Paragraphs Content and Configuration

This command sets up your site with paragraph-based layouts and components.

Command:

command
ddev drush recipe ../recipes/tailpine_paragraphs

What this does:

  • Enables required modules for paragraph-based layouts

  • Creates and configures paragraph types

  • Imports sample content including:

    • Homepage with hero sections and featured content

    • Showcase page with portfolio and demo components

    • About us page with team profiles and company information

    • Contact us page with forms and location details

  • Sets up content structure using paragraphs

  • Configures display modes for paragraph components

Use case: Choose this option if you want to build your site using Drupal's paragraph system for more structured content management.

5. NPM Installation 

Check your setup: Run npm --version to verify global installation. if  npm version is there it mean npm is installed globally.

If npm is installed globally on your system, you can run commands directly:

bash
npm run build
npm install

If Run npm --version  command is not found then it means npm is not installed globally, prefix commands with ddev:

bash
ddev npm run build
ddev npm install

6.Install NPM Dependencies

Finally, install all front-end dependencies by running:

commond
npm i

This installs all required packages listed in package.json and sets up the Tailwind CSS and Storybook build environment for Tailpine.

After completing these steps, your Tailpine subtheme will be ready for development with all tools and configurations in place

7. NPM run build command:

Compiles and optimizes Tailwind CSS for production use. This command processes your Tailwind configuration, components, and utilities to generate a optimized CSS file.

Usage:

bash
npm run build

Output: Generates optimized css/tailwind.css with all used utility classes, minified for production.

8.Component Story Generation

Automatically creates Storybook story files (.story.yml) based on component variants defined in your .component.yml files.

if there is not variant then it will only generate default.story.yml file.

Command Syntax:

bash
ddev drush --include="web/themes/custom/tailpine" gst --component=component_name

What It Generates:

  • Components with variants: Creates multiple story entries showcasing each variant

  • Simple components: Generates a single default story with placeholder content

Examples:

bash
# Generate stories for a button component with multiple variants
ddev drush --include="web/themes/custom/tailpine" gst --component=button_with_variants

# Generate stories for a simple card component
ddev drush --include="web/themes/custom/tailpine" gst --component=card

File Location: Creates components/component_name/component_name.story.yml