Basic Tailwind CSS Theme Setup for Drupal Canvas

👉 Support the channel & get exclusive content - Join WebWash Premium: https://www.webwash.net/premium/

NOTE: Re-upload because the stream stopped halfway.

Join our free live stream to learn how to set up a basic Tailwind theme and integrate it with Drupal Canvas using custom components.

We'll cover:

- Creating a Drupal theme from scratch using Tailwind.
- Integrating Vite to compile Tailwind.
- Basic theming techniques.
- Creating custom components for Drupal Canvas.

This is a foundational setup session perfect for developers who want to start building modern, component-based Drupal themes.

We'll keep it practical and focused on getting you up and running.

# Chapters

00:00 Preshow

00:29 WebWash Premium

## Introduction
01:26 Drupal Canvas
02:52 Test site
03:36 Drupal canvas UI

## Create Theme
05:47 Site setup
06:42 Create theme
08:54 Delete non-used folders
09:54 Enable theme
10:29 Regions
12:21 Add regions
13:22 Rearrange blocks in regions

## Tailwind
15:11 Tailwind
16:00 npm init
16:36 Install tailwind
17:03 Create vite config
19:11 Modify package.json
19:30 Import tailwind
22:12 Modify library asset
23:03 Tailwind compiling

## Theme modifications
24:01 Override page template
25:35 Add header region
26:44 Add tailwind source
27:56 Question: Interview question about recipes
30:41 Rant: Use Drupal CMS 1 or 2

## Theme styling
31:38 Styling sites
32:30 Style site branding block
35:35 Question: Handle large .theme file
37:11 Style menu block
39:51 Add content region
40:20 Add footer region
42:50 Override region template

## Tailwind styling
44:14 Tailwind styling
44:36 Create tailwind components
45:10 Add button styling
46:11 Add tab styling
46:45 Add typography styling
47:39 Import css files
48:12 Tab styling
50:06: Question: Setting caching off with development.services.yml
52:28 Tailwind form styling

## Drupal Canvas
56:52 Drupal Canvas
58:24 Installing Drupal Canvas
58:57 Create canvas page
59:22 Drupal Canvas UI
1:01:30 Drupal canvas link

## Create text component
1:03:01 Create text component
1:05:11 Modify text component template
1:05:58 Change prop to HTML
1:07:24 Align text
1:10:02 Question: Modify text format

## Create heading component
1:13:28 Create heading component
1:16:08 Modify props on heading
1:18:37 Modify heading twig template

## Create section component
1:21:29 Create section component
1:24:09 Modify props on section
1:25:05 Modify section twig template

## Create card component
1:28:36 Card component
1:29:36 Create card component
1:31:35 Debug missing component
1:32:53 Modify props on card
1:34:08 Modify card twig template
1:35:27 Create card components
1:36:38 Using section and card components

## Hero image component
1:38:20 Create hero image component
1:39:22 Modify hero image props
1:39:43 Modify hero image twig template

## Controlling the container
1:43:05 Controlling container
1:44:14 Modify page template
1:45:45 Add PHP logic in page preprocess

## Ending
1:47:33 Recap

1:50:05 Ending

Видео Basic Tailwind CSS Theme Setup for Drupal Canvas канала WebWash