Updates before nor(DEV):con

taking-flight-with-tailwind-css/code/writing-plugin-1.js

@@ -0,0 +1,24 @@
+// Start require plugin
+const plugin = require("tailwindcss/plugin");
+// End require plugin
+
+// Start add function
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function({ addUtilities }) {
+
+})
+// End add function
+
+// Start function contents
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function({ addUtilities }) {
+  addUtilities({
+    '.list-reset': {
+      listStyle: 'none',
+      padding: 0,
+    },
+  })
+})
+// End function contents

taking-flight-with-tailwind-css/code/writing-plugin-2.js

@@ -0,0 +1,47 @@
+// Start create plugin
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+
+});
+// End create plugin
+
+// Start define styles
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+  let styles = {
+    primary: {
+      default: {
+        backgroundColor: theme("colors.primary.DEFAULT"),
+        border: `2px solid ${theme("colors.primary.dark")}`,
+        borderRadius: "10px",
+        color: theme("colors.white"),
+        cursor: "pointer",
+        padding: `${theme("padding.3")} ${theme("padding.12")}`,
+      },
+
+      hover: {
+        backgroundColor: theme("colors.white"),
+        color: theme("colors.primary.DEFAULT"),
+      },
+    },
+  }
+});
+
+// End define styles
+
+// Start add components
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+
+  // ...
+
+  addComponents({
+    "#edit-checkout.button": styles.primary.default,
+    "#edit-checkout.button:hover, #edit-checkout.button:focus":
+      styles.primary.hover,
+  });
+});
+// End add components

taking-flight-with-tailwind-css/opdavies-dark.yaml

@@ -1,15 +1,23 @@
-embeddedFonts: []
+embeddedFonts:
-  ["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
+  - - Inconsolata.ttf
-  ["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+  - - Helvetica.ttf
+    - Helvetica-Bold.ttf
+    - Helvetica.ttf
+    - Helvetica-Bold.ttf
 
 fontsAlias:
-  fontFont: Helvetica
   fontBold: Helvetica-Bold
+  fontFont: Helvetica
   fontItalic: Helvetica
   fontMono: Inconsolata
   fontMonoBold: Inconsolata
   fontMonoBoldItalic: Inconsolata
   fontMonoItalic: Inconsolata
+  
+linkColor: '#60a5fa'
 
 pageSetup:
   firstTemplate: coverPage
@@ -26,99 +34,84 @@ pageSetup:
 
 pageTemplates:
   coverPage:
-    # background: images/title.png
+    background: ../images/bg-dark.png
-    frames: []
+    frames:
-      [12%, 10%, 76%, 75%]
+      - - 12%
+        - 10%
+        - 76%
+        - 75%
     showFooter: false
     showHeader: false
+ 
+  imagePage:
+    alignment: TA_CENTER
     background: ../images/bg-dark.png
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
+
+  outputPage:
+    background: ../images/bg-dark.png
+    frames:
+      - - 8%
+        - 10%
+        - 82%
+        - 65%
+    showFooter: false
+    showHeader: false
+
+  standardPage:
+    background: ../images/bg-dark.png
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
 
   titlePage:
     alignment: TA_CENTER
-    frames: []
+    background: ../images/bg-dark.png
-      [8%, 8%, 85%, 65%]
+    frames:
+      - - 8%
+        - 8%
+        - 85%
+        - 65%
     showFooter: true
     showHeader: false
-    background: ../images/bg-dark.png
-
-  standardPage:
-    frames: []
-      [3%, 3%, 92%, 92%]
-    showFooter: true
-    showHeader: false
-    background: ../images/bg-dark.png
-
-  imagePage:
-    alignment: TA_CENTER
-    frames: []
-      [3%, 3%, 92%, 92%]
-    showFooter: true
-    showHeader: false
-    background: ../images/bg-dark.png
-
-  outputPage:
-    frames: []
-      [8%, 10%, 82%, 65%]
-    showFooter: false
-    showHeader: false
-    background: ../images/bg-dark.png
-
-linkColor: #60a5fa
 
 styles:
-  normal:
-    fontSize: 24
-    textColor: #ffffff
-
   bodytext:
     alignment: TA_LEFT
 
-  heading:
-    fontName: fontBold
-    fontSize: 20
-    spaceAfter: 16
-    textColor: #60a5fa
-
-  title:
-    fontSize: 300%
-    parent: heading
-
   bullet-list:
-    commands: []
+    colWidths:
-       [LEFTPADDING, [0, 0], [1, -1], 5]
+      - '20'
-       [RIGHTPADDING, [0, 0], [1, -1], 0]
+      - null
-    colWidths: ["20", null]
+    commands:
-    textColor: #ffffff
+      - - LEFTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 5
+      - - RIGHTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 0
+    textColor: '#ffffff'
 
   bullet-list-item:
-    spaceBefore: 18
     spaceAfter: 0
+    spaceBefore: 18
 
-  titleslideinfo:
-    alignment: TA_CENTER
-    fontSize: 140%
-    parent: normal
-
-  footer:
-    alignment: TA_RIGHT
-    fontName: fontMono
-    fontSize: 20
-    textColor: #24608a
-    rightIndent: 16
-    spaceBefore: 0
-
-  literal:
-    backColor: #111111
-    fontName: fontMono
-
-  code:
-    backColor: #111111
-    borderWidth: 0
-    fontSize: 24
-    leading: 26
-    parent: literal
-    spaceBefore: 4
-  
   centred:
     alignment: TA_CENTER
     parent: normal
@@ -129,3 +122,43 @@ styles:
     fontSize: 48
     leading: 64
     parent: heading
+
+  code:
+    backColor: '#111111'
+    borderWidth: 0
+    fontSize: 24
+    leading: 26
+    parent: literal
+    spaceBefore: 4
+
+  footer:
+    alignment: TA_RIGHT
+    fontName: fontMono
+    fontSize: 20
+    rightIndent: 16
+    spaceBefore: 0
+    textColor: '#24608a'
+
+  heading:
+    fontName: fontBold
+    fontSize: 20
+    spaceAfter: 16
+    textColor: '#60a5fa'
+
+  literal:
+    backColor: '#111111'
+    fontName: fontMono
+
+  normal:
+    fontSize: 24
+    textColor: '#ffffff'
+
+  title:
+    fontSize: 300%
+    parent: heading
+
+  titleslideinfo:
+    alignment: TA_CENTER
+    fontSize: 140%
+    parent: normal
+

taking-flight-with-tailwind-css/opdavies-light.yaml

@@ -1,16 +1,24 @@
-embeddedFonts: []
+embeddedFonts:
-  ["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
+  - - Inconsolata.ttf
-  ["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+  - - Helvetica.ttf
+    - Helvetica-Bold.ttf
+    - Helvetica.ttf
+    - Helvetica-Bold.ttf
 
 fontsAlias:
-  fontFont: Helvetica
   fontBold: Helvetica-Bold
+  fontFont: Helvetica
   fontItalic: Helvetica
   fontMono: Inconsolata
   fontMonoBold: Inconsolata
   fontMonoBoldItalic: Inconsolata
   fontMonoItalic: Inconsolata
 
+linkColor: '#24608a'
+
 pageSetup:
   firstTemplate: coverPage
   height: 18cm
@@ -26,94 +34,79 @@ pageSetup:
 
 pageTemplates:
   coverPage:
-    # background: images/title.png
+    frames:
-    frames: []
+      - - 12%
-      [12%, 10%, 76%, 75%]
+        - 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: []
+    frames:
-      [3%, 3%, 92%, 92%]
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
     showFooter: true
     showHeader: false
 
   outputPage:
-    frames: []
+    frames:
-      [8%, 10%, 82%, 65%]
+      - - 8%
+        - 10%
+        - 82%
+        - 65%
     showFooter: false
     showHeader: false
 
-linkColor: #24608a
+  standardPage:
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
+
+  titlePage:
+    alignment: TA_CENTER
+    frames:
+      - - 8%
+        - 8%
+        - 85%
+        - 65%
+    showFooter: true
+    showHeader: false
 
 styles:
-  normal:
-    fontSize: 24
-    textColor: #383745
-
   bodytext:
     alignment: TA_LEFT
 
-  heading:
-    fontName: fontBold
-    fontSize: 20
-    spaceAfter: 16
-    textColor: #24608a
-
-  title:
-    fontSize: 300%
-    parent: heading
-
   bullet-list:
-    commands: []
+    colWidths:
-       [LEFTPADDING, [0, 0], [1, -1], 5]
+      - '20'
-       [RIGHTPADDING, [0, 0], [1, -1], 0]
+      - null
-    colWidths: ["20", null]
+    commands:
-    textColor: #aaaaaa
+      - - LEFTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 5
+      - - RIGHTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 0
+    textColor: '#aaaaaa'
 
   bullet-list-item:
-    spaceBefore: 18
     spaceAfter: 0
+    spaceBefore: 18
 
-  titleslideinfo:
-    alignment: TA_CENTER
-    fontSize: 140%
-    parent: normal
-
-  footer:
-    alignment: TA_RIGHT
-    fontName: fontMono
-    fontSize: 20
-    textColor: #24608a
-    rightIndent: 16
-    spaceBefore: 0
-
-  literal:
-    backColor: white
-    fontName: fontMono
-
-  code:
-    backColor: white
-    borderWidth: 0
-    fontSize: 24
-    leading: 26
-    parent: literal
-    spaceBefore: 0
-  
   centred:
     alignment: TA_CENTER
     parent: normal
@@ -124,3 +117,42 @@ styles:
     fontSize: 48
     leading: 64
     parent: heading
+
+  code:
+    backColor: white
+    borderWidth: 0
+    fontSize: 24
+    leading: 26
+    parent: literal
+    spaceBefore: 0
+
+  footer:
+    alignment: TA_RIGHT
+    fontName: fontMono
+    fontSize: 20
+    rightIndent: 16
+    spaceBefore: 0
+    textColor: '#24608a'
+
+  heading:
+    fontName: fontBold
+    fontSize: 20
+    spaceAfter: 16
+    textColor: '#24608a'
+
+  literal:
+    backColor: white
+    fontName: fontMono
+
+  normal:
+    fontSize: 24
+    textColor: '#383745'
+
+  title:
+    fontSize: 300%
+    parent: heading
+
+  titleslideinfo:
+    alignment: TA_CENTER
+    fontSize: 140%
+    parent: normal

taking-flight-with-tailwind-css/sections/adding-classes.rst

@@ -1,44 +0,0 @@
-.. class:: centredtitle
-
-Adding Tailwind to your CSS
-
-.. page:: standardPage
-
-Including Tailwind
-==================
-
-.. code-block:: css 
-    :linenos:
-    :include: code/1-adding-tailwind-directives.txt
-
-Adding your own classes
-=======================
-
-.. code-block:: css
-    :linenos:
-    :include: code/2-adding-custom-classes.txt
-
-Adding your own classes (with layers)
-=====================================
-
-.. code-block:: css
-    :linenos:
-    :include: code/3-layers.txt
-
-.. raw:: pdf
-
-    TextAnnotation "Automatically places your code in the right position."
-
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-``npx tailwind
---input src/css/tailwind.pcss
---output dist/tailwind.css``
-
-.. raw:: pdf
-
-   TextAnnotation "As well as the output file, we need to specify the input file."

taking-flight-with-tailwind-css/sections/arbitrary-values.rst

@@ -1,34 +0,0 @@
-.. Switch to a title page.
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-Arbitrary values
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``w-[23px] md:w-[250px]``
-``text-[#abc123]``
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``grid-cols-[fit-content(theme(spacing.32))]``
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``lg:[&:nth-child(3)]:hover
-:underline``

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

@@ -1,62 +0,0 @@
-
-.. 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 
-    :linenos:
-    :include: code/20-loops.txt
-
-Includes
-========
-
-.. code-block:: twig 
-    :linenos:
-    :include: code/21-includes.txt
-
-.. 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 
-    :linenos:
-    :include: code/css-apply-before.txt
-
-Extracting CSS components
-=========================
-
-.. code-block:: css 
-    :linenos:
-    :include: code/css-apply-after.txt

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

@@ -1,55 +0,0 @@
-.. 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
-   :linenos:
-   :hl_lines: 5 6 7
-
-.. raw:: pdf
-
-    TextAnnotation "Overrides all colours."
-
-Extending configuration
-=======================
-
-.. code-block:: javascript
-   :linenos:
-   :include: code/extending-colours.txt
-   :hl_lines: 5 6 7 8 9
-
-.. raw:: pdf
-
-    TextAnnotation "Extends Tailwind's default colours."
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-``npx tailwind init --full``
-
-.. raw:: pdf
-
-   PageBreak titlePage

taking-flight-with-tailwind-css/sections/existing-project.rst

@@ -1,97 +0,0 @@
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-Adding Tailwind CSS to an existing project
-
-
-.. raw:: pdf
-
-   PageBreak standardPage
-
-Disabling the reset styles
-==========================
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 7 8 9
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      content: [],
-      theme: {
-        extend: {},
-      },
-      corePlugins: {
-        preflight: false,
-      },
-      plugins: [],
-    }
-
-Prefixing class names
-=====================
-
-Turn classes like ``flex`` into ``tw-flex``.
-
-|
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      prefix: "tw-",
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      important: true,
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      important: "#app",
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-|
-
-|
-
-.. class:: centredtitle
-
-``!flex``

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

@@ -1,33 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Keeping Things Small: Controlling the file size
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Just in Time (JIT mode)
-
-.. raw:: pdf
-
-   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."
-
-.. page:: standardPage
-
-Content
-=======
-
-Tell Tailwind where it should look for utility classes.
-
-|
-
-
-.. code-block:: javascript
-    :linenos:
-    :include: code/tailwind-config-content.js
-
-.. raw:: pdf
-
-   TextAnnotation "Tailwind will scan the files within the content array and "

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

@@ -1,30 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Installation and Usage
-
-.. page::
-
-.. class:: centredtitle
-
-``npm install --save-dev
-tailwindcss``
-
-.. raw:: pdf
-
-    TextAnnotation "There is a CDN version available that provides everything but you can't customise it."
-    TextAnnotation "There's also the play.tailwindcss.com website that you can use."
-    TextAnnotation "Adds it as a dependency to your package.json file"
-
-.. page::
-
-.. class:: centredtitle
-
-``npx tailwind
---content **/*.html
---output build/tailwind.css``
-
-.. raw:: pdf
-
-   TextAnnotation "tailwind.config.js is optional, and an input file is optional."

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

@@ -1,57 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Interaction states
-
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``hover, focus, active, disabled, visited,
-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:

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

@@ -1,131 +0,0 @@
-.. 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 customisable, 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
-
-    PageBreak titlePage
-    TextAnnotation "All generated from a single, customisable configuration file."
-
-.. class:: centredtitle
-
-``block
-inline
-flex
-grid``
-
-.. raw:: pdf
-
-   PageBreak
-   TextAnnotation "A class that toggles a single CSS property."
-
-
-.. class:: centredtitle
-
-``text-sm
-text-base
-text-lg
-text-xl
-text-2xl``
-
-.. raw:: pdf
-
-    PageBreak
-    TextAnnotation "T-shirt size arguments."
-
-.. class:: centredtitle
-
-``text-blue-50
-text-blue-100
-text-blue-200
-text-blue-300
-text-blue-400
-text-blue-500``
-
-.. raw:: pdf
-
-    PageBreak imagePage
-    TextAnnotation "Arguments for text colour and shade."
-
-.. 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

@@ -1,104 +0,0 @@
-.. 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
-    :linenos:
-    :include: code/plugins-add-plugin.txt
-
-Generated CSS
-=============
-
-.. code-block:: css
-   :linenos:
-   :include: code/plugins-generated-css.txt
-
-Writing plugins
-===============
-
-.. code-block:: javascript 
-   :linenos:
-   :include: code/plugins-plugin-source.txt
-
-Writing plugins
-===============
-
-Adding `child` and `child-hover` variants:
-
-|
-
-.. code-block:: javascript 
-   :linenos:
-
-   const plugin = require('tailwindcss/plugin');
-
-   module.exports = plugin(({ addVariant }) => {
-     addVariant('child', '& > *');
-     addVariant('child-hover', '& > *:hover');
-   });
-
-Writing plugins
-===============
-
-Adding a `hocus` variant:
-
-|
-
-.. code-block:: javascript 
-   :linenos:
-
-   const plugin = require('tailwindcss/plugin');
-
-   module.exports = plugin(({ addVariant }) => {
-     addVariant('hocus', ['&:hover', '&:focus']);
-   });
-
-Writing plugins
-===============
-
-Creating a button component:
-
-|
-
-.. code-block:: javascript 
-    :linenos:
-
-    plugin(function ({ addComponents, theme }) {
-      let styles = {
-        primary: {
-          default: {
-            backgroundColor: theme("colors.primary.DEFAULT"),
-            border: `2px solid ${theme("colors.primary.dark")}`,
-            borderRadius: "10px",
-            color: theme("colors.white"),
-            cursor: "pointer",
-            padding: `${theme("padding.3")} ${theme("padding.12")}`,
-          },
-
-          hover: {
-            backgroundColor: theme("colors.white"),
-            color: theme("colors.primary.DEFAULT"),
-          },
-        },
-      }
-
-      addComponents({
-        "#edit-checkout.button": styles.primary.default,
-        "#edit-checkout.button:hover, #edit-checkout.button:focus":
-          styles.primary.hover,
-      })
-    })

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

@@ -1,52 +0,0 @@
-.. 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
-    :linenos:
-    :include: code/12-default-screens.txt
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-``md:flex``
-
-|
-
-.. class:: centredtitle
-
-``md:hover:bg-red-500``
-
-.. page:: standardPage
-
-Responsive classes in CSS
-=========================
-
-.. code-block:: css
-    :linenos:
-    :include: code/13-responsive-classes.txt
-
-Responsive classes in HTML
-==========================
-
-.. code-block:: html
-    :linenos:
-    :include: code/14-responsive-class-example.txt

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

@@ -1,74 +0,0 @@
-.. 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 don't waste time and energy inventing class names.
-- No switching between CSS and HTML files.
-- Your CSS stops growing.
-- 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 "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