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 => ( + + {item.title} + +))} 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 => ( - - {item.title} - - ))} +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 -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