Add 'Taking Flight with Tailwind CSS' slides

taking-flight-with-tailwind-css/README.rst

@@ -0,0 +1,4 @@
+Taking Flight with Tailwind CSS
+###############################
+
+https://www.oliverdavies.uk/talks/taking-flight-tailwind-css

taking-flight-with-tailwind-css/code/1-adding-tailwind-directives.txt

@@ -0,0 +1,7 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

taking-flight-with-tailwind-css/code/10-hover-class-example.txt

@@ -0,0 +1,6 @@
+<a
+  href="#"
+  class="text-red-500 hover:text-red-800"
+>
+  Read more
+</a>

taking-flight-with-tailwind-css/code/11-default-variants.txt

@@ -0,0 +1,13 @@
+// defaultConfig.stub.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+  backgroundPosition: ['responsive'],
+  backgroundRepeat: ['responsive'],
+  // ...
+}

taking-flight-with-tailwind-css/code/12-default-screens.txt

@@ -0,0 +1,8 @@
+// defaultConfig.stub.js
+
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},

taking-flight-with-tailwind-css/code/13-responsive-classes.txt

@@ -0,0 +1,9 @@
+.block {
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+}

taking-flight-with-tailwind-css/code/14-responsive-class-example.txt

@@ -0,0 +1,9 @@
+<div class="block md:flex">
+  <div class="w-full md:w-1/2">
+    Column 1
+  </div>
+
+  <div class="w-full md:w-1/2">
+    Column 2
+  </div>
+</div>

taking-flight-with-tailwind-css/code/15-variants-before.txt

@@ -0,0 +1,11 @@
+// tailwind.config.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+  // ...
+}

taking-flight-with-tailwind-css/code/16-variants-after.txt

@@ -0,0 +1,11 @@
+  // tailwind.config.js
+
+  variants: {
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+-   alignSelf: ['responsive'],
++   alignSelf: false,
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+-   backgroundColor: ['responsive', 'hover', 'focus'],
++   backgroundColor: ['responsive'],

taking-flight-with-tailwind-css/code/17-config-before.txt

@@ -0,0 +1,16 @@
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},
+colors: {
+  transparent: 'transparent',
+  black: '#000',
+  white: '#fff',
+  gray: {
+    100: '#f7fafc',
+    200: '#edf2f7',
+    300: '#e2e8f0',
+  },
+  // ...

taking-flight-with-tailwind-css/code/18-config-after.txt

@@ -0,0 +1,16 @@
+  screens: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+-   xl: '1280px',
+  },
+  colors: {
+    transparent: 'transparent',
+    black: '#000',
+    white: '#fff',
+    gray: {
+      100: '#f7fafc',
+-     200: '#edf2f7',
+-     300: '#e2e8f0',
+    },
+    // ...

taking-flight-with-tailwind-css/code/19-purge-config.txt

@@ -0,0 +1,10 @@
+module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.vue',
+    './src/**/*.jsx',
+  ],
+  theme: {},
+  variants: {},
+  plugins: [],
+}

taking-flight-with-tailwind-css/code/2-adding-custom-classes.txt

@@ -0,0 +1,10 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+/* Custom base styles */
+
+@tailwind components;
+/* Custom components */
+
+@tailwind utilities;
+/* Custom utilities */

taking-flight-with-tailwind-css/code/20-loops.txt

@@ -0,0 +1,10 @@
+{# base.html.twig #}
+
+{% for item in navItems %}
+  <a
+    class="block py-3 px-4 text-sm text-gray-800"
+    href="{{ item.url }}"
+  >
+   {{ item.title }}
+  </a>
+{% endfor %}

taking-flight-with-tailwind-css/code/21-includes.txt

@@ -0,0 +1,13 @@
+{# classes.html.twig #}
+
+<h2>Adults</h2>
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'adults',
+} %}
+
+<h2>Kids</h2>
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'kids',
+} %}

taking-flight-with-tailwind-css/code/3-layers.txt

@@ -0,0 +1,9 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Custom components */
+}

taking-flight-with-tailwind-css/code/4-sample-output.txt

@@ -0,0 +1,15 @@
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}

taking-flight-with-tailwind-css/code/5-webpack-config.txt

@@ -0,0 +1,10 @@
+let Encore = require('@symfony/webpack-encore')
+
+Encore
+  .disableSingleRuntimeChunk()
+  .setOutputPath('dist/')
+  .setPublicPath('/dist')
+  .addStyleEntry('app', './src/css/tailwind.pcss')
+  .enablePostCssLoader()
+
+module.exports = Encore.getWebpackConfig()

taking-flight-with-tailwind-css/code/6-postcss-config.txt

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss')
+  ]
+}

taking-flight-with-tailwind-css/code/7-webpack-output.txt

@@ -0,0 +1,9 @@
+$ npx encore dev
+
+Running webpack ...
+
+DONE  Compiled successfully in 1705ms                                                   
+
+1 files written to build
+
+Entrypoint app [big] = app.css

taking-flight-with-tailwind-css/code/8-html.txt

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My new website</title>
+    <link rel="stylesheet" href="/dist/app.css" />
+  </head>
+  <body></body>
+</html>

taking-flight-with-tailwind-css/code/9-hover-classes.txt

@@ -0,0 +1,11 @@
+.text-red-500 {
+  color: #f56565;
+}
+
+.hover\:text-red-500:hover {
+  color: #f56565;
+}
+
+.focus\:text-red-500:focus {
+  color: #f56565;
+}

taking-flight-with-tailwind-css/code/additional-config-options.txt

@@ -0,0 +1,14 @@
+module.exports = {
+  important: true,
+  prefix: '',
+  separator: ':',
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    colors: {
+      inherit: 'inherit'
+    },
+    extend: {},
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/css-apply-after.txt

@@ -0,0 +1,17 @@
+a.btn {
+  font-size: 0.875rem;
+  text-decoration: none;
+  font-weight: 700;
+  border-radius: 9999px;
+  display: inline-block;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #fff;
+  background-color: #3182ce;
+}
+
+a.btn:hover {
+  background-color: #2b6cb0;
+}

taking-flight-with-tailwind-css/code/css-apply-before.txt

@@ -0,0 +1,7 @@
+a.btn {
+  @apply text-sm no-underline font-bold;
+  @apply rounded-full inline-block px-5 py-2;
+  @apply text-white bg-blue-600;
+
+  @apply hover:bg-blue-700;
+}

taking-flight-with-tailwind-css/code/extending-colours.txt

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        inherit: 'inherit'
+      }
+    },
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/override-colours.txt

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    colors: {
+      inherit: 'inherit'
+    },
+    extend: {},
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/plugins-add-plugin.txt

@@ -0,0 +1,11 @@
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('tailwindcss-list-reset')()
+  ],
+  variants: {},
+}

taking-flight-with-tailwind-css/code/plugins-generated-css.txt

@@ -0,0 +1,4 @@
+.list-reset {
+  list-style: none;
+  padding: 0;
+}

taking-flight-with-tailwind-css/code/plugins-plugin-source.txt

@@ -0,0 +1,13 @@
+// index.js
+
+module.exports = variants => ({ addUtilities }) => {
+  addUtilities(
+    {
+      '.list-reset': {
+        listStyle: 'none',
+        padding: 0,
+      },
+    },
+    variants,
+  )
+}

taking-flight-with-tailwind-css/code/tailwind-basic-config.txt

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

taking-flight-with-tailwind-css/images/tailwind.svg

@@ -0,0 +1,10 @@
+<svg class="w-10 h-10 lg:w-12 lg:h-12 block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                  <title>Tailwind CSS</title>
+                  <path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoMarkGradient)" fill-rule="evenodd"></path>
+                  <defs>
+                    <linearGradient x1="0%" y1="0%" y2="100%" id="logoMarkGradient">
+                      <stop stop-color="#2298BD"></stop>
+                      <stop offset="1" stop-color="#0ED7B5"></stop>
+                    </linearGradient>
+                  </defs>
+                </svg>

taking-flight-with-tailwind-css/main.style

@@ -0,0 +1,122 @@
+pageSetup:
+    firstTemplate: coverPage
+    height: 18cm
+    margin-bottom: 0cm
+    margin-gutter: 0cm
+    margin-left: 0cm
+    margin-right: 0cm
+    margin-top: 0cm
+    size: null
+    spacing-footer: 2mm
+    spacing-header: 2mm
+    width: 32cm
+
+pageTemplates:
+    coverPage:
+        # background: images/title.png
+        frames: []
+            [12%, 10%, 76%, 75%]
+        showFooter: false
+        showHeader: false
+
+    titlePage:
+        alignment: TA_CENTER
+        frames: []
+            [8%, 8%, 85%, 65%]
+        showFooter: true
+        showHeader: false
+
+    standardPage:
+        frames: []
+            [3%, 3%, 92%, 92%]
+        showFooter: true
+        showHeader: false
+
+    imagePage:
+        alignment: TA_CENTER
+        frames: []
+            [12%, 10%, 76%, 80%]
+        showFooter: true
+        showHeader: false
+
+    outputPage:
+        frames: []
+            [8%, 10%, 82%, 65%]
+        showFooter: false
+        showHeader: false
+
+linkColor: #24608a
+
+styles:
+    normal:
+        fontSize: 24
+        leading: 32
+        textColor: #383745
+
+    bodytext:
+        alignment: TA_LEFT
+
+    heading:
+        fontSize: 20
+        spaceAfter: 16
+        textColor: #24608a
+
+    title:
+        fontSize: 300%
+        parent: heading
+
+    bullet-list:
+        commands: []
+             [LEFTPADDING, [0, 0], [1, -1], 10]
+             [RIGHTPADDING, [0, 0], [1, -1], 0]
+             [VALIGN, [0, 0], [-1, -1], TOP]
+        colWidths: ["20", null]
+        textColor: #aaaaaa
+
+    bullet-list-item:
+        spaceBefore: 14
+        spaceAfter: 0
+
+    titleslideinfo:
+        alignment: TA_CENTER
+        fontSize: 140%
+        parent: normal
+
+    footer:
+        alignment: TA_RIGHT
+        fontName: stdMono
+        fontSize: 20
+        textColor: #24608a
+        rightIndent: 16
+        spaceBefore: 0
+
+    literal:
+        backColor: #eeeeee
+        fontName: stdMono
+
+    code:
+        backColor: #eeeeee
+        borderWidth: 0
+        fontSize: 20
+        leading: 24
+        parent: literal
+        spaceBefore: 4
+    
+    blockquote:
+        parent: normal
+        fontName: stdItalic
+        leading: 36
+
+    attribution:
+        parent: normal
+        textColor: #66666
+
+    centered:
+        alignment: TA_CENTER
+
+    centredtitle:
+        alignment: TA_CENTER
+        fontName: stdBold
+        fontSize: 48
+        leading: 64
+        parent: heading

taking-flight-with-tailwind-css/sections/components.rst

@@ -0,0 +1,62 @@
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How I deal with repetition?
+
+.. page::
+
+.. class:: centredtitle
+
+Avoid repetition by extracting components
+
+.. page::
+
+.. class:: centredtitle
+
+Does something justify becoming a component?
+
+.. page::
+
+.. class:: centredtitle
+
+Could the duplication be moved elsewhere?
+
+.. raw:: pdf
+
+    TextAnnotation "Twig partials, Vue components, WordPress template parts."
+
+.. page:: standardPage
+
+Loops
+=====
+
+.. code-block:: twig 
+    :include: code/20-loops.txt
+    :linenos:
+
+Includes
+========
+
+.. code-block:: twig 
+    :include: code/21-includes.txt
+    :linenos:
+
+.. raw:: pdf
+
+    TextAnnotation "Move the duplicate markup into a partial, so there's only one version. Pass data in."
+
+Extracting CSS components
+=========================
+
+.. code-block:: css 
+    :include: code/css-apply-before.txt
+    :linenos:
+
+Extracting CSS components
+=========================
+
+.. code-block:: css 
+    :include: code/css-apply-after.txt
+    :linenos:

taking-flight-with-tailwind-css/sections/customising.rst

@@ -0,0 +1,58 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Customising Tailwind
+
+.. page::
+
+.. class:: centredtitle
+
+``npx tailwind init``
+
+.. page:: standardPage
+
+tailwind.config.js
+==================
+
+.. code-block:: javascript
+    :include: code/tailwind-basic-config.txt
+    :linenos:
+
+Overriding configuration
+========================
+
+.. code-block:: javascript
+    :include: code/override-colours.txt
+    :hl_lines: 5 6 7
+    :linenos:
+
+.. raw:: pdf
+
+    TextAnnotation "Overrides all colours."
+
+Extending configuration
+=======================
+
+.. code-block:: javascript
+    :include: code/extending-colours.txt
+    :hl_lines: 5 6 7 8 9
+    :linenos:
+
+.. raw:: pdf
+
+    TextAnnotation "Extends Tailwind's default colours."
+
+Additional options
+==================
+
+.. code-block:: javascript
+    :include: code/additional-config-options.txt
+    :hl_lines: 2 3 4
+    :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx tailwind init --full``

taking-flight-with-tailwind-css/sections/file-size.rst

@@ -0,0 +1,80 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Keeping Things Small: Controlling the File size
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Disabling unused variants and core plugins
+
+.. page:: standardPage
+
+Default variants
+================
+
+.. code-block:: javascript
+    :include: code/15-variants-before.txt
+    :linenos:
+
+Updated variants
+================
+
+.. code-block:: diff 
+    :include: code/16-variants-after.txt
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Manually removing unused or unwanted classes
+
+.. page:: standardPage
+
+.. code-block:: javascript
+    :include: code/17-config-before.txt
+
+.. page::
+
+.. code-block:: diff 
+    :include: code/18-config-after.txt
+
+.. raw:: pdf
+
+    TextAnnotation "Needs to be done manually"
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Automatically removing unused classes
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind + PurgeCSS
+
+.. page:: standardPage
+
+PurgeCSS configuration
+======================
+
+.. code-block:: javascript
+    :include: code/19-purge-config.txt
+    :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx encore dev``
+
+.. page::
+
+.. class:: centredtitle
+
+``NODE_ENV=production
+npx encore prod``

taking-flight-with-tailwind-css/sections/installation.rst

@@ -0,0 +1,154 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How do I install Tailwind?
+
+.. page::
+
+.. class:: centredtitle
+
+1\. Use the CDN
+
+|
+
+https://unpkg.com/tailwindcss/dist/tailwind.min.css
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+To get the most out of Tailwind, you really should install it via npm
+
+.. raw:: pdf
+
+    TextAnnotation "You can't customize Tailwind's default theme."
+    TextAnnotation "You can't use any directives like @apply, @variants, etc.."
+    TextAnnotation "You can't enable features like group-hover."
+    TextAnnotation "You can't install third-party plugins."
+
+.. page::
+
+.. class:: centredtitle
+
+2\. Installing Tailwind via NPM
+
+.. page::
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss``
+
+.. class:: centredtitle
+
+``yarn add -D tailwindcss``
+
+.. raw:: pdf
+
+    TextAnnotation "Adds it as a dependency to your package.json file"
+
+.. page::
+
+.. class:: centredtitle
+
+Adding Tailwind to your CSS
+
+.. page:: standardPage
+
+Including Tailwind
+==================
+
+.. code-block:: css 
+    :include: code/1-adding-tailwind-directives.txt
+    :linenos:
+
+Adding your own classes
+=======================
+
+.. code-block:: css
+    :include: code/2-adding-custom-classes.txt
+    :linenos:
+
+Adding your own classes (with layers)
+=====================================
+
+.. code-block:: css
+    :include: code/3-layers.txt
+    :linenos:
+
+.. raw:: pdf
+
+    TextAnnotation "Automatically places your code in the right position."
+    TextAnnotation "Can be purged if needed."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Processing your CSS with the build command
+
+.. raw:: pdf
+
+    TextAnnotation "Compile the generated CSS Pass through PostCSS and Tailwind."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx tailwind build
+src/css/tailwind.pcss
+-o dist/app.css``
+
+.. page:: standardPage
+
+.. code-block:: css
+    :include: code/4-sample-output.txt
+    :linenos:
+
+.. raw:: pdf
+
+    TextAnnotation "Small, low-level, re-usable utility classes."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Processing your CSS with Webpack Encore
+
+.. page::
+
+.. class:: centredtitle 
+
+``npm install --save-dev
+@symfony/webpack-encore``
+
+.. page:: standardPage
+
+webpack.config.js
+=================
+
+.. code-block:: javascript
+    :include: code/5-webpack-config.txt
+
+.. raw:: pdf
+
+    TextAnnotation "PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested"
+
+postcss.config.js
+=================
+
+.. code-block:: javascript
+    :include: code/6-postcss-config.txt
+
+Running Webpack
+===============
+
+.. code-block::
+    :include: code/7-webpack-output.txt
+
+Adding Tailwind to HTML
+=======================
+
+.. code-block:: html
+    :include: code/8-html.txt

taking-flight-with-tailwind-css/sections/interaction-states.rst

@@ -0,0 +1,57 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Interaction states
+
+hover, focus, active, disabled, visited,
+group-hover, focus-within,
+first-child, last-child...
+
+.. page::
+
+.. class:: centredtitle
+
+``[state][separator][class]``
+
+.. raw:: pdf
+
+    TextAnnotation "State = hover, focus, group focus, focus within."
+    TextAnnotation "Separator = configurable"
+    TextAnnotation "Colon by default"
+    TextAnnotation "Class = the same utility class that you would have used normally"
+
+.. page::
+
+.. class:: centredtitle
+
+``hover:text-red-500``
+
+|
+
+.. class:: centredtitle
+
+``focus:text-red-500``
+
+.. page:: standardPage
+
+Interaction states in CSS
+=========================
+
+.. code-block:: css
+    :include: code/9-hover-classes.txt
+    :linenos:
+
+Interaction states in HTML
+==========================
+
+.. code-block:: html
+    :include: code/10-hover-class-example.txt
+    :linenos:
+
+Default variants
+================
+
+.. code-block:: javascript
+    :include: code/11-default-variants.txt
+    :linenos:

taking-flight-with-tailwind-css/sections/intro.rst

@@ -0,0 +1,92 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+What is Tailwind CSS?
+
+.. page::
+
+.. class:: centredtitle
+
+A utility-first CSS framework for rapidly building custom designs
+
+.. raw:: pdf
+
+    TextAnnotation "CSS utility class generator."
+    TextAnnotation "PostCSS plugin."
+    TextAnnotation "Make different looking sites using the same class names."
+    TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind CSS is a highly customizable, low-level CSS framework
+
+.. raw:: pdf
+
+    TextAnnotation "No components like Bootstrap or Bulma."
+    TextAnnotation "Configure it per project."
+    TextAnnotation "Extendable if needed via additional plugins."
+    TextAnnotation "Avoids the need to name things prematurely."
+    TextAnnotation "Can extract components if needed (reusability)."
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind is more than a CSS framework, it's an engine for creating design systems
+
+.. raw:: pdf
+
+    TextAnnotation "Good default values provided - colours, fonts, padding, widths"
+    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."
+
+.. page:: standardPage
+
+- Text/border/background colours
+- Font size/family/weight
+- Alignment
+- Padding/margin/negative margin
+- Flexbox
+- Positioning
+- Lists
+- z-index
+- Opacity
+
+.. raw:: pdf
+
+    TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."
+
+.. page::
+
+- Screenreader visibility
+- Placeholder colour
+- first-child, last-child, nth-child
+- CSS Grid
+- Transition
+- Transform
+- Spacing / Divide
+- Focus ring
+- Text clamping
+
+.. raw:: pdf
+
+    TextAnnotation "All generated from a single, customisable configuration file."
+
+.. page:: imagePage
+
+.. image:: images/screenshot-laravel-nova.png
+    :width: 23cm
+
+.. page::
+
+.. image:: images/screenshot-send-firefox.png
+    :width: 23cm
+
+.. page::
+
+.. image:: images/screenshot-rebuilding-bartik.png
+    :width: 23cm

taking-flight-with-tailwind-css/sections/plugins.rst

@@ -0,0 +1,35 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Extending Tailwind CSS with Plugins
+
+.. page::
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss-list-reset``
+
+.. page:: standardPage
+
+Adding a plugin
+===============
+
+.. code-block:: javascript
+    :include: code/plugins-add-plugin.txt
+    :linenos:
+
+Generated CSS
+=============
+
+.. code-block:: css
+    :include: code/plugins-generated-css.txt
+    :linenos:
+
+Writing a plugin
+================
+
+.. code-block:: javascript 
+    :include: code/plugins-plugin-source.txt
+    :linenos:

taking-flight-with-tailwind-css/sections/responsive.rst

@@ -0,0 +1,50 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Responsive
+
+.. raw:: pdf
+
+    TextAnnotation "Mobile first by default"
+
+.. page::
+
+.. class:: centredtitle
+
+``[screen][separator][class]``
+
+.. page:: standardPage
+
+Screens (aka breakpoints)
+=========================
+
+.. code-block:: javascript
+    :include: code/12-default-screens.txt
+    :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``md:flex``
+
+|
+
+.. class:: centredtitle
+
+``md:hover:bg-red-500``
+
+.. page:: standardPage
+
+Responsive classes in CSS
+=========================
+
+.. code-block:: css
+    :include: code/13-responsive-classes.txt
+
+Responsive classes in HTML
+==========================
+
+.. code-block:: html
+    :include: code/14-responsive-class-example.txt

taking-flight-with-tailwind-css/sections/usage.rst

@@ -0,0 +1,108 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How do I use Tailwind?
+
+.. page::
+
+.. class:: centredtitle
+
+Style elements by applying pre-existing classes directly in your HTML
+
+.. page::
+
+.. class:: centredtitle
+
+Using utility classes to build custom designs without writing CSS
+
+.. page:: standardPage
+
+Benefits
+========
+
+- You aren't wasting time and energy inventing class names
+- Your CSS stops growing
+- Making changes feels 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 "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."
+
+.. page:: imagePage
+
+.. image:: images/example/0.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/1.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/2.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/3.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/4.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/5.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/6.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/7.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/8.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/9.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/10.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/11.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/12.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/13.png
+    :width: 18cm
+
+.. page::
+
+.. image:: images/example/14.png
+    :width: 18cm

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

@@ -0,0 +1,59 @@
+.. footer:: @opdavies
+
+Taking Flight with Tailwind CSS 
+################################
+
+|
+
+.. class:: titleslideinfo
+
+Oliver Davies (@opdavies)
+
+.. raw:: pdf
+
+    TextAnnotation "I work primarily with Drupal and Symfony."
+    TextAnnotation "I work for Inviqa, but this based on my personal and side projects."
+
+.. page:: imagePage
+
+.. image:: images/techs.png
+    :width: 16cm 
+
+.. include:: sections/intro.rst
+.. include:: sections/usage.rst
+.. include:: sections/installation.rst
+.. include:: sections/interaction-states.rst
+.. include:: sections/responsive.rst
+.. include:: sections/customising.rst
+.. include:: sections/file-size.rst
+.. include:: sections/components.rst
+.. include:: sections/plugins.rst
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Demo
+
+.. page:: imagePage
+
+.. image:: images/paul-hennell-tweet.png
+    :width: 18cm
+
+.. page:: standardPage
+
+Thanks!
+=======
+
+References:
+
+* https://tailwindcss.com
+* https://tailwindui.com
+* https://www.youtube.com/c/TailwindLabs
+* https://drupal.org/project/tailwindcss
+
+|
+
+Me:
+
+* https://www.oliverdavies.uk