Update Tailwind CSS talk for DrupalCamp Ghent

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;
+}

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;
+}

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;
+}

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>
+))}

src/taking-flight-with-tailwind-css/code/tailwind-config-content.js

@@ -1,7 +1,6 @@
 // tailwind.config.js
 
 module.exports = {
-  mode: "jit",
+  content: ['./templates/**/*.twig'],
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   // ...
 }

src/taking-flight-with-tailwind-css/slides.rst

@@ -9,26 +9,193 @@ 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 "Something I've used in Drupal, Symfony, Sculpin, Vue.js, Astro, and others."
-    TextAnnotation "I'm always updating the talk every time I give it as things change in the framework and ecosystem."
+    PageBreak standardPage
+
+What is utility-first CSS?
+==========================
+
+* 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 "The opposite way to how you're taught to write CSS."
+
+.. raw:: pdf
+
+   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
 
-.. Switch to an image page.
 .. raw:: pdf
 
    PageBreak imagePage
 
-.. image:: images/techs.png
+.. image:: images/screenshot-laravel-nova.png
-    :width: 16cm 
+    :width: 23cm
 
 .. raw:: pdf
 
-    TextAnnotation "I'm a Full Stack Software Developer. I work primarily with PHP and JavaScript, and specifically Drupal, Symfony and Vue.js."
+  PageBreak
-    TextAnnotation "I can use Tailwind CSS on all of these projects."
+
+.. 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
@@ -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
@@ -76,7 +226,7 @@ Tailwind CSS is a highly customisable, low-level CSS framework
 
 .. class:: centredtitle
 
-Tailwind is more than a CSS framework, it's an engine for creating design systems
+CSS utility class generator
 
 .. raw:: pdf
 
@@ -84,10 +234,6 @@ 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
 
 - Text/border/background colours
@@ -103,9 +249,6 @@ 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
 
 - Screenreader visibility
@@ -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
@@ -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 => (
+Loops
-       <a
+=====
-         class="block py-3 px-4 text-sm text-gray-800"
+
-         href={item.url}
+.. code-block:: html
-       >
+   :linenos:
-         {item.title}
+   :include: code/20-loops-2.txt
-       </a>
+   :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
-
-.. image:: images/paul-hennell-tweet.png
-    :width: 18cm
-
-.. Switch to a title page.
 .. raw:: pdf
 
   PageBreak titlePage
 
 .. class:: centredtitle
 
-Demo
+Tailwind CSS in Drupal
+
+.. raw:: pdf
+
+    PageBreak imagePage
+
+.. image:: images/drupal-org.png
+    :width: 22cm
+
+.. image:: images/drupal-gitlab.png
+    :width: 22cm
+
+.. raw:: pdf
+
+   PageBreak titlePage
+
+.. class:: centredtitle
+
+``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