diff --git a/src/taking-flight-with-tailwind-css/1.txt b/src/taking-flight-with-tailwind-css/1.txt
new file mode 100644
index 0000000..af71ab4
--- /dev/null
+++ b/src/taking-flight-with-tailwind-css/1.txt
@@ -0,0 +1,6 @@
+h1 {
+ font-size: 3rem;
+ font-weight: bold;
+ color: #020617; /* Dark grey */
+ padding: .5rem 0 2rem;
+}
diff --git a/src/taking-flight-with-tailwind-css/2.txt b/src/taking-flight-with-tailwind-css/2.txt
new file mode 100644
index 0000000..cde1d82
--- /dev/null
+++ b/src/taking-flight-with-tailwind-css/2.txt
@@ -0,0 +1,16 @@
+h1 {
+ font-size: 3rem;
+ font-weight: bold;
+ color: #020617; /* Dark grey */
+ padding: .5rem 0 2rem;
+}
+
+.card {
+ padding: 2rem;
+}
+
+.card p {
+ color: #020617; /* Dark grey */
+ font-size: 3rem;
+ font-weight: bold;
+}
diff --git a/src/taking-flight-with-tailwind-css/3.txt b/src/taking-flight-with-tailwind-css/3.txt
new file mode 100644
index 0000000..b15ac2b
--- /dev/null
+++ b/src/taking-flight-with-tailwind-css/3.txt
@@ -0,0 +1,15 @@
+.font-bold {
+ font-weight: bold;
+}
+
+.text-slate-900 {
+ color: #020617;
+}
+
+.text-5xl {
+ text-size: 3rem;
+}
+
+.flex {
+ display: flex;
+}
diff --git a/src/taking-flight-with-tailwind-css/code/20-loops-2.txt b/src/taking-flight-with-tailwind-css/code/20-loops-2.txt
new file mode 100644
index 0000000..e9e3976
--- /dev/null
+++ b/src/taking-flight-with-tailwind-css/code/20-loops-2.txt
@@ -0,0 +1,8 @@
+{navItems.map(item => (
+ <a
+ class="block py-3 px-4 text-sm text-gray-800"
+ href={item.url}
+ >
+ {item.title}
+ </a>
+))}
diff --git a/src/taking-flight-with-tailwind-css/code/tailwind-config-content.js b/src/taking-flight-with-tailwind-css/code/tailwind-config-content.js
index ad75b41..c3924c8 100644
--- a/src/taking-flight-with-tailwind-css/code/tailwind-config-content.js
+++ b/src/taking-flight-with-tailwind-css/code/tailwind-config-content.js
@@ -1,7 +1,6 @@
// tailwind.config.js
module.exports = {
- mode: "jit",
- content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ content: ['./templates/**/*.twig'],
// ...
}
diff --git a/src/taking-flight-with-tailwind-css/images/drupal-gitlab.png b/src/taking-flight-with-tailwind-css/images/drupal-gitlab.png
new file mode 100644
index 0000000..3a60659
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/drupal-gitlab.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/drupal-org.png b/src/taking-flight-with-tailwind-css/images/drupal-org.png
new file mode 100644
index 0000000..c37bc75
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/drupal-org.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/drupal-starterkit.png b/src/taking-flight-with-tailwind-css/images/drupal-starterkit.png
new file mode 100644
index 0000000..3d185bb
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/drupal-starterkit.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/drupal-theme.png b/src/taking-flight-with-tailwind-css/images/drupal-theme.png
new file mode 100644
index 0000000..ddc2861
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/drupal-theme.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-1.png b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-1.png
new file mode 100644
index 0000000..40f25b1
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-1.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-2.png b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-2.png
new file mode 100644
index 0000000..7eb1561
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-2.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-3.png b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-3.png
new file mode 100644
index 0000000..a7435ed
Binary files /dev/null and b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet-3.png differ
diff --git a/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet.png b/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet.png
deleted file mode 100644
index db3b619..0000000
Binary files a/src/taking-flight-with-tailwind-css/images/paul-hennell-tweet.png and /dev/null differ
diff --git a/src/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst b/src/taking-flight-with-tailwind-css/slides.rst
similarity index 69%
rename from src/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
rename to src/taking-flight-with-tailwind-css/slides.rst
index 4066051..286788f 100644
--- a/src/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
+++ b/src/taking-flight-with-tailwind-css/slides.rst
@@ -9,29 +9,196 @@ Taking Flight with Tailwind CSS
Oliver Davies (@opdavies)
+|
+
+.. class:: centred
+
+https://opdavi.es/dcg
+
.. raw:: pdf
TextAnnotation "I'll be talking about utility class styling and Tailwind CSS, which is a CSS framework that I've been using and I was an early adopter of."
- TextAnnotation ""
- TextAnnotation "I'm always updating the talk every time I give it as things change in the framework and ecosystem."
+ TextAnnotation "Something I've used in Drupal, Symfony, Sculpin, Vue.js, Astro, and others."
+ PageBreak standardPage
-.. Switch to an image page.
-.. raw:: pdf
+What is utility-first CSS?
+==========================
- PageBreak imagePage
-
-.. image:: images/techs.png
- :width: 16cm
+* A different way to write CSS.
+* Instead of writing CSS in separate files, you work primarily in HTML.
+* Small CSS classes with a single responsibility.
+* Classes are named by what they do, not where they are used.
.. raw:: pdf
- TextAnnotation "I'm a Full Stack Software Developer. I work primarily with PHP and JavaScript, and specifically Drupal, Symfony and Vue.js."
- TextAnnotation "I can use Tailwind CSS on all of these projects."
+ TextAnnotation "The opposite way to how you're taught to write CSS."
-.. Switch to a title page.
.. raw:: pdf
- PageBreak titlePage
+ PageBreak titlePage
+
+.. class:: centredtitle
+
+The traditional CSS approach
+
+.. raw:: pdf
+
+ PageBreak standardPage
+
+.. code-block:: css
+ :include: 1.txt
+ :linenos:
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 2.txt
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Already starting to see duplication"
+ PageBreak
+
+.. code-block:: css
+ :include: 2.txt
+ :linenos:
+ :hl_lines: 2,14
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 2.txt
+ :linenos:
+ :hl_lines: 3,15
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 2.txt
+ :linenos:
+ :hl_lines: 4,13
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 2.txt
+ :linenos:
+ :hl_lines: 5,9
+
+.. raw:: pdf
+
+ PageBreak titlePage
+
+.. class:: centredtitle
+
+The utility-first CSS approach
+
+.. raw:: pdf
+
+ PageBreak standardPage
+
+.. code-block:: css
+ :include: 3.txt
+ :linenos:
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 3.txt
+ :linenos:
+ :hl_lines: 1,2,3
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 3.txt
+ :linenos:
+ :hl_lines: 5,6,7
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 3.txt
+ :linenos:
+ :hl_lines: 9,10,11
+
+.. raw:: pdf
+
+ PageBreak
+
+.. code-block:: css
+ :include: 3.txt
+ :linenos:
+ :hl_lines: 13,14,15
+
+.. raw:: pdf
+
+ PageBreak
+
+What problems does this solve?
+==============================
+
+- You don't waste time and energy inventing class names.
+- No switching between CSS and HTML files.
+- Your CSS stops growing.
+- Reusability.
+- Making changes feels (and is) safer.
+
+.. raw:: pdf
+
+ TextAnnotation "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container."
+ TextAnnotation "Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS."
+ TextAnnotation ""
+ TextAnnotation "You can re-use components like a news card on events page as the classes aren't coupled to a specific component."
+ TextAnnotation ""
+ TextAnnotation "CSS is global and you never know what you're breaking when you make a change."
+ TextAnnotation "Classes in your HTML are local, so you can change them without worrying about something else breaking."
+
+ PageBreak titlePage
+
+.. class:: centredtitle
+
+Examples
+
+.. raw:: pdf
+
+ PageBreak imagePage
+
+.. image:: images/screenshot-laravel-nova.png
+ :width: 23cm
+
+.. raw:: pdf
+
+ PageBreak
+
+.. image:: images/screenshot-send-firefox.png
+ :width: 23cm
+
+.. raw:: pdf
+
+ PageBreak
+
+.. image:: images/screenshot-rebuilding-bartik.png
+ :width: 23cm
+
+.. raw:: pdf
+
+ PageBreak titlePage
.. class:: centredtitle
@@ -43,23 +210,6 @@ What is Tailwind CSS?
.. class:: centredtitle
-A utility-first CSS framework for rapidly building custom designs
-
-.. raw:: pdf
-
- TextAnnotation "CSS utility class generator."
- TextAnnotation ""
- TextAnnotation "PostCSS plugin."
- TextAnnotation ""
- TextAnnotation "Make different looking sites using the same class names."
- TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
-
-.. raw:: pdf
-
- PageBreak
-
-.. class:: centredtitle
-
Tailwind CSS is a highly customisable, low-level CSS framework
.. raw:: pdf
@@ -72,11 +222,11 @@ Tailwind CSS is a highly customisable, low-level CSS framework
.. raw:: pdf
- PageBreak
+ PageBreak
.. class:: centredtitle
-Tailwind is more than a CSS framework, it's an engine for creating design systems
+CSS utility class generator
.. raw:: pdf
@@ -84,11 +234,7 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
TextAnnotation "Designing with constraints."
TextAnnotation "Using inline styles, every value is a magic number."
TextAnnotation "With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs."
-
-.. Switch to a standard page.
-.. raw:: pdf
-
- PageBreak standardPage
+ PageBreak standardPage
- Text/border/background colours
- Font size/family/weight
@@ -103,10 +249,7 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
.. raw:: pdf
TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."
-
-.. raw:: pdf
-
- PageBreak
+ PageBreak
- Screenreader visibility
- Placeholder colour
@@ -120,8 +263,8 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
.. raw:: pdf
- PageBreak titlePage
TextAnnotation "All generated from a single, customisable configuration file."
+ PageBreak titlePage
.. class:: centredtitle
@@ -163,137 +306,8 @@ text-blue-500``
.. raw:: pdf
- PageBreak imagePage
TextAnnotation "Arguments for text colour and shade."
-.. image:: images/screenshot-laravel-nova.png
- :width: 23cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/screenshot-send-firefox.png
- :width: 23cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/screenshot-rebuilding-bartik.png
- :width: 23cm
-
-.. Switch to a title page.
-.. raw:: pdf
-
- PageBreak titlePage
-
-.. class:: centredtitle
-
-How to use Tailwind
-
-.. raw:: pdf
-
- PageBreak
-
-.. class:: centredtitle
-
-Style elements by applying pre-existing classes directly in your HTML
-
-.. raw:: pdf
-
- TextAnnotation "Instead of switching back and forth between HTML and CSS files, styling is done within the HTML markup by applying existing classes."
-
-.. raw:: pdf
-
- PageBreak
-
-.. class:: centredtitle
-
-Using utility classes to build custom designs without writing CSS
-
-.. Switch to a standard page.
-.. raw:: pdf
-
- PageBreak standardPage
-
-Benefits
-========
-
-- You don't waste time and energy inventing class names.
-- No switching between CSS and HTML files.
-- Your CSS stops growing.
-- Reusability.
-- Making changes feels (and is) safer.
-
-.. raw:: pdf
-
- TextAnnotation "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container."
- TextAnnotation "Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS."
- TextAnnotation ""
- TextAnnotation "You can re-use components like a news card on events page as the classes aren't coupled to a specific component."
- TextAnnotation ""
- TextAnnotation "CSS is global and you never know what you're breaking when you make a change."
- TextAnnotation "Classes in your HTML are local, so you can change them without worrying about something else breaking."
-
-.. Switch to an image page.
-.. raw:: pdf
-
- PageBreak imagePage
-
-.. image:: images/example/0.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/1.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/2.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/3.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/4.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/5.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/6.png
- :width: 18cm
-
-.. raw:: pdf
-
- PageBreak
-
-.. image:: images/example/7.png
- :width: 18cm
-
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -304,7 +318,7 @@ Installation and Usage
.. raw:: pdf
- PageBreak
+ PageBreak
.. class:: centredtitle
@@ -331,7 +345,6 @@ tailwindcss``
TextAnnotation "tailwind.config.js is optional, and an input file is optional."
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -379,7 +392,6 @@ first-child, last-child``
``focus:text-red-500``
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -391,6 +403,30 @@ Interaction states in CSS
:include: code/9-hover-classes.txt
:linenos:
+Interaction states in CSS
+=========================
+
+.. code-block:: css
+ :include: code/9-hover-classes.txt
+ :linenos:
+ :hl_lines: 1,2,3
+
+Interaction states in CSS
+=========================
+
+.. code-block:: css
+ :include: code/9-hover-classes.txt
+ :linenos:
+ :hl_lines: 5,6,7
+
+Interaction states in CSS
+=========================
+
+.. code-block:: css
+ :include: code/9-hover-classes.txt
+ :linenos:
+ :hl_lines: 9,10,11
+
Interaction states in HTML
==========================
@@ -398,7 +434,14 @@ Interaction states in HTML
:include: code/10-hover-class-example.txt
:linenos:
-.. Switch to a title page.
+Interaction states in HTML
+==========================
+
+.. code-block:: html
+ :include: code/10-hover-class-example.txt
+ :linenos:
+ :hl_lines: 3
+
.. raw:: pdf
PageBreak titlePage
@@ -419,7 +462,6 @@ Responsive
``[screen][separator][class]``
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -431,7 +473,6 @@ Screens (aka breakpoints)
:linenos:
:include: code/12-default-screens.txt
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -446,7 +487,6 @@ Screens (aka breakpoints)
``md:hover:bg-red-500``
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -458,6 +498,22 @@ Responsive classes in CSS
:linenos:
:include: code/13-responsive-classes.txt
+Responsive classes in CSS
+=========================
+
+.. code-block:: css
+ :linenos:
+ :include: code/13-responsive-classes.txt
+ :hl_lines: 1,2,3
+
+Responsive classes in CSS
+=========================
+
+.. code-block:: css
+ :linenos:
+ :include: code/13-responsive-classes.txt
+ :hl_lines: 5,6,7,8,9
+
Responsive classes in HTML
==========================
@@ -465,7 +521,22 @@ Responsive classes in HTML
:linenos:
:include: code/14-responsive-class-example.txt
-.. Switch to a title page.
+Responsive classes in HTML
+==========================
+
+.. code-block:: html
+ :linenos:
+ :include: code/14-responsive-class-example.txt
+ :hl_lines: 1
+
+Responsive classes in HTML
+==========================
+
+.. code-block:: html
+ :linenos:
+ :include: code/14-responsive-class-example.txt
+ :hl_lines: 2,6
+
.. raw:: pdf
PageBreak titlePage
@@ -500,7 +571,6 @@ Arbitrary values
``lg:[&:nth-child(3)]:hover
:underline``
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -517,7 +587,6 @@ How I deal with repetition?
Avoid repetition by extracting components
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -532,17 +601,41 @@ Loops
Loops
=====
+.. code-block:: twig
+ :linenos:
+ :include: code/20-loops.txt
+ :hl_lines: 1,8
+
+Loops
+=====
+
+.. code-block:: twig
+ :linenos:
+ :include: code/20-loops.txt
+ :hl_lines: 2,3,4,5,6,7
+
+Loops
+=====
+
.. code-block:: html
:linenos:
+ :include: code/20-loops-2.txt
- {navItems.map(item => (
- <a
- class="block py-3 px-4 text-sm text-gray-800"
- href={item.url}
- >
- {item.title}
- </a>
- ))}
+Loops
+=====
+
+.. code-block:: html
+ :linenos:
+ :include: code/20-loops-2.txt
+ :hl_lines: 1,8
+
+Loops
+=====
+
+.. code-block:: html
+ :linenos:
+ :include: code/20-loops-2.txt
+ :hl_lines: 2,3,4,6,7
Includes
========
@@ -569,21 +662,6 @@ Includes
<ClassList classes={classes} type="adults" />
-Extracting CSS components
-=========================
-
-.. code-block:: css
- :linenos:
- :include: code/css-apply-before.txt
-
-Extracting CSS components
-=========================
-
-.. code-block:: css
- :linenos:
- :include: code/css-apply-after.txt
-
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -604,7 +682,6 @@ Just in Time (JIT mode)
TextAnnotation "Since the JIT mode was added and changed to be the default option, Tailwind only generates the classes that it needs to - i.e. only the classes in your HTML."
-.. Switch to a title page.
.. raw:: pdf
PageBreak standardPage
@@ -625,7 +702,6 @@ Tell Tailwind where it should look for utility classes.
TextAnnotation "Tailwind will scan the files within the content array and "
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -642,7 +718,6 @@ Customising Tailwind
``npx tailwind init``
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -678,7 +753,6 @@ Extending configuration
TextAnnotation "Extends Tailwind's default colours."
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -695,7 +769,6 @@ Extending configuration
Adding Tailwind to your CSS
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -714,6 +787,30 @@ Adding your own classes
:linenos:
:include: code/2-adding-custom-classes.txt
+Adding your own classes
+=======================
+
+.. code-block:: css
+ :linenos:
+ :include: code/2-adding-custom-classes.txt
+ :hl_lines: 3,4
+
+Adding your own classes
+=======================
+
+.. code-block:: css
+ :linenos:
+ :include: code/2-adding-custom-classes.txt
+ :hl_lines: 6,7
+
+Adding your own classes
+=======================
+
+.. code-block:: css
+ :linenos:
+ :include: code/2-adding-custom-classes.txt
+ :hl_lines: 9,10
+
Adding your own classes (with layers)
=====================================
@@ -725,7 +822,22 @@ Adding your own classes (with layers)
TextAnnotation "Automatically places your code in the right position."
-.. Switch to a title page.
+Adding your own classes (with layers)
+=====================================
+
+.. code-block:: css
+ :linenos:
+ :include: code/3-layers.txt
+ :hl_lines: 3,4,5
+
+Adding your own classes (with layers)
+=====================================
+
+.. code-block:: css
+ :linenos:
+ :include: code/3-layers.txt
+ :hl_lines: 7,8,9
+
.. raw:: pdf
PageBreak titlePage
@@ -757,7 +869,6 @@ Extending Tailwind CSS with Plugins
``npm install --save-dev
tailwindcss-list-reset``
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -766,9 +877,16 @@ Adding a plugin
===============
.. code-block:: javascript
+ :include: code/plugins-add-plugin.txt
+ :linenos:
+
+Adding a plugin
+===============
+
+.. code-block:: javascript
+ :include: code/plugins-add-plugin.txt
:linenos:
:hl_lines: 7 8 9
- :include: code/plugins-add-plugin.txt
Generated CSS
=============
@@ -845,40 +963,6 @@ Adding a `hocus` variant:
addVariant('hocus', ['&:hover', '&:focus']);
});
-Writing plugins
-===============
-
-Creating a button component:
-
-|
-
-.. code-block:: javascript
- :linenos:
- :include: code/writing-plugin-2.js
- :start-after: // Start create plugin
- :end-before: // End create plugin
-
-Writing plugins
-===============
-
-.. code-block:: javascript
- :linenos:
- :hl_lines: 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
- :include: code/writing-plugin-2.js
- :start-after: // Start define styles
- :end-before: // End define styles
-
-Writing plugins
-===============
-
-.. code-block:: javascript
- :linenos:
- :hl_lines: 6 7 8 9 10 11
- :include: code/writing-plugin-2.js
- :start-after: // Start add components
- :end-before: // End add components
-
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
@@ -887,7 +971,6 @@ Writing plugins
Adding Tailwind CSS to an existing project
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage
@@ -977,24 +1060,67 @@ Turn classes like ``flex`` into ``tw-flex``.
``!flex``
-.. Switch to an image page.
.. raw:: pdf
- PageBreak imagePage
+ PageBreak titlePage
-.. image:: images/paul-hennell-tweet.png
- :width: 18cm
+.. class:: centredtitle
+
+Tailwind CSS in Drupal
+
+.. raw:: pdf
+
+ PageBreak imagePage
+
+.. image:: images/drupal-org.png
+ :width: 22cm
+
+.. image:: images/drupal-gitlab.png
+ :width: 22cm
-.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
-Demo
+``composer require
+drupal/tailwindcss:^5``
+
+.. raw:: pdf
+
+ PageBreak
+
+.. class:: centredtitle
+
+``php web/core/scripts/drupal
+generate-theme my_theme
+--starterkit tailwindcss``
+
+.. raw:: pdf
+
+ PageBreak imagePage
+
+.. image:: images/drupal-starterkit.png
+ :width: 22cm
+
+.. image:: images/drupal-theme.png
+ :width: 22cm
+
+
+.. raw:: pdf
+
+ PageBreak
+
+.. image:: images/paul-hennell-tweet-1.png
+ :width: 22cm
+
+.. image:: images/paul-hennell-tweet-2.png
+ :width: 22cm
+
+.. image:: images/paul-hennell-tweet-3.png
+ :width: 22cm
-.. Switch to a standard page.
.. raw:: pdf
PageBreak standardPage