Drupal 11 Theme Tailpine Introduces Tailwind CSS, Alpine JS, and Storybook Integration

Staff Reporter

Creating new Drupal 11 theme with TailwindCSS, Alpine JS, Storybook and Single Directory Components

The Drupak YouTube channel has published a tutorial on creating a new Drupal 11 theme incorporating Tailwind CSS, Alpine JS, Storybook, and Single Directory Components (SDC). Led by Syed Muhammad Azmat Shah, the session demonstrates setting up a Drupal theme with Tailwind CSS and Alpine JS, configuring Storybook, creating SDC components, and integrating them within Drupal’s site-building framework.

The tutorial was recorded on January 25, Global Contribution Day 2025, with the objective of contributing the theme to Drupal.org. The resulting theme, Tailpine, is under active development by the Drupak team and is now listed on Drupal.org, though its first release is still pending.

Tailpine is designed to streamline frontend development in Drupal by offering automatic setup with Storybook, Tailwind, and Alpine JS support upon installation via Composer. The project aims to serve as a primary theme option for Tailwind CSS-based Drupal projects. Further details and updates on the theme are available on its Drupal.org project page: https://www.drupal.org/project/tailpine.

Reference: Creating new Drupal 11 theme with TailwindCSS, Alpine JS, Storybook and Single Directory Components by Syed Muhammad Azmat Shah, DRUPAK (25 February 2025)

Drupal 11

Drupal Theme

Tailwind CSS

Storybook

Drupal

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.