Updates before the Bristol Software meetup

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

@@ -17,16 +17,88 @@ Adding a plugin
 ===============
 
 .. code-block:: javascript
+    :linenos:
     :include: code/plugins-add-plugin.txt
 
 Generated CSS
 =============
 
 .. code-block:: css
-    :include: code/plugins-generated-css.txt
+   :linenos:
+   :include: code/plugins-generated-css.txt
 
-Writing a plugin
-================
+Writing plugins
+===============
 
 .. code-block:: javascript 
-    :include: code/plugins-plugin-source.txt
+   :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,
+      })
+    })