Create a Drupal theme

⚠️

Section under construction.

We will not focus on details here, but just have an overview of the two main methods to create a Drupal theme.

Starterkit

You can use a default Starterkit or your very own, to be reused between projects. The idea here is to not extend but just make a copy to start from so there is no need to worry if the source changes. It's still possible to track source changes.

Use the default Starterkit

Create it in the themes/custom/my_theme directory

php core/scripts/drupal generate-theme my_theme --path themes/custom

Use a contributed or custom Starterkit

Replace source_theme_name

php core/scripts/drupal generate-theme --starterkit source_theme_name my_theme

Starterkit theme (opens in a new tab) - Drupal.org

Extend a base theme

You take most of the base theme and add your own customizations. Sub-themes inherit all the features of the base theme, the base can also inherit from another base theme.

In your my_theme.info.yml file, use the following line and replace the base_theme_name

my_theme.info.yml

base theme: base_theme_name

Creating sub-themes (opens in a new tab) - Drupal.org

Add libraries: CSS and JS

Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml (opens in a new tab) - Drupal.org

If Tailwind is your thing, make sure to read this fantastic post from Matt Glaman: Migrating to TailwindCSS, iteratively, in your Drupal theme (opens in a new tab) where he explains how to use TailwindCSS (opens in a new tab) with PostCSS and browserSync. Bundling and purging are handled by Laravel Mix (opens in a new tab), that removes the hassle of configuring Webpack.