Tailwind intellisense and update to voices opml

_data/labs.json

@@ -8,7 +8,7 @@
     "dateModified": "ongoing",
     "image": "https://user-images.githubusercontent.com/623568/207959370-a7a9d3ba-98a9-4787-9376-a8f3d1fae38e.png",
     "imageAlt": "Curvy red path with two dots indicating motion",
-    "feature": true
+    "feature": false
   },
   {
     "name": "Hero Dice",
@@ -40,5 +40,15 @@
     "image": "https://user-images.githubusercontent.com/623568/233101852-cc17b991-9360-4794-add9-51e5ce8ae4b9.png",
     "imageAlt": "Construction crane with warning barricades. Icon by Eko Purnomo.",
     "feature": false
+  },
+  {
+    "name": "Web Voices",
+    "url": "/voices.xml",
+    "source": "https://github.com/nathanlong/nathanlong.github.io/blob/main/public/xsl/voices.xsl",
+    "description": "My curated list of interesting websites. Powered by OPML and XSL.",
+    "dateCreated": "2023-11-13",
+    "image": "https://github.com/nathanlong/nathanlong.github.io/assets/623568/ce60dd05-ebb0-46e7-9501-306ca4f1dbc6",
+    "imageAlt": "Profile of a face speaking inside a web browser. Icon by Gregor Cresnar.",
+    "feature": true
   }
 ]

content/blog/class-regex-for-tailwind-intellisense.md

@@ -0,0 +1,61 @@
+---
+title: Custom Class Regex for Tailwind IntelliSense in Neovim
+description: For when your templating language expects something that looks nothing like HTML.
+date: 2023-11-29
+tags: neovim
+---
+
+Sometimes while using Tailwind, you need to place classes into things that aren't structured like HTML elements. Take a look at this Twig snippet from a Craft site:
+
+{% raw %}
+```twig
+{{ entry.primaryDescription ? tag('div', {
+  class: 'text-body-lg text-rich',
+  html: entry.primaryDescription,
+}) }}
+```
+{% endraw %}
+
+This checks for the existence of a field and wraps it in a `<div>` tag... But that little bit there as `class:`... If you're running Tailwind in Neovim like me, it doesn't recognize that as a trigger for autocomplete because it wants that sweet, sweet HTML `class=` attribute.
+
+And without IntelliSense/autocomplete you're missing a critical piece of the Tailwind authoring experience. You NEED autocomplete when working with Tailwind.
+
+The fine folks working on Tailwind realized this problem and have exposed some settings to allow custom triggers for whatever wacky format your templating language wants. In fact, they've exposed two methods for us:
+
+1. The [class attribute](https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes) setting.
+2. The experimental [class regex setting](https://www.paolotiu.com/blog/get-tailwind-intellisense-anywhere)
+
+We're looking at the second one. Most guides will tell you to plop some JSON in your VSCode settings and it's not immediately clear where the equivalent of this is for Neovim. But hey, you're here now, so I'll show you. You stuff it into your LSP initialization settings for Tailwind, like this:
+
+```lua
+local lspconfig = require('lspconfig')
+local capabilities = require('cmp_nvim_lsp').default_capabilities()
+local on_attach = --this is a custom function that sets several options
+
+-- The initialization of TailwindCSS LSP
+lspconfig.tailwindcss.setup {
+  on_attach = on_attach,
+  capabilities = capabilities,
+  settings = {
+    tailwindCSS = {
+      experimental = {
+        classRegex = {
+          "(?:class: ?)(?:'|\"|`)([^\"'`]*)(?:'|\"|`)", -- Twig, looks for string preceded by 'class:'
+        }
+      }
+    }
+  }
+}
+```
+
+This setup assumes a few things:
+
+1. You're using [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) to connect to your LSPs.
+2. You're using [nvim-cmp](https://github.com/hrsh7th/nvim-cmp) for autocomplete.
+
+You can check out my [earlier post](/blog/modern-javascript-tooling-in-neovim/) on setting up LSP's or look at my [init.lua](https://github.com/nathanlong/dotfiles/blob/main/nvim/init.lua) to see how I've set it up.
+
+The regex itself is looking for anything inside a string (either `""` or `''`) preceded by `class:` and 0 to 1 spaces. Tailwind will now helpfully suggest classes once you kick open that string. If you need something different than what's listed here you can check out [this repository of sample regexes you can use](https://github.com/paolotiu/tailwind-intellisense-regex-list) for different patterns.
+
+Happy autocompleting!
+