Updates before the Bristol Software meetup

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

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

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

@@ -1,12 +1,12 @@
-{# 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/additional-config-options.txt

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

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

@@ -1,6 +1,6 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  content: [],
   theme: {
     extend: {
       colors: {
@@ -8,5 +8,5 @@ module.exports = {
       }
     },
   },
-  // ...
+  plugins: [],
 }

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

@@ -1,11 +1,11 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  content: [],
   theme: {
     colors: {
       inherit: 'inherit'
     },
     extend: {},
   },
-  // ...
+  plugins: [],
 }

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

@@ -1,13 +1,10 @@
-// index.js
+const plugin = require("tailwindcss/plugin");
 
-module.exports = variants => ({ addUtilities }) => {
-  addUtilities(
-    {
-      '.list-reset': {
-        listStyle: 'none',
-        padding: 0,
-      },
+plugin(function({ addUtilities }) {
+  addUtilities({
+    '.list-reset': {
+      listStyle: 'none',
+      padding: 0,
     },
-    variants,
-  )
-}
+  })
+})

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

@@ -1,11 +1,8 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  content: [],
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 }

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

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