Making TailwindCSS IntelliSense Work with Phlex in VSCode

When working with Phlex—Ruby's object-oriented view component library—you might notice that TailwindCSS IntelliSense doesn't work out of the box. This happens because Phlex components are defined in Ruby files, which TailwindCSS doesn't recognize by default.

The Problem

In Phlex, you write HTML using Ruby syntax:

div class: "flex items-center justify-between" do
  # content here
end

But VSCode's TailwindCSS extension won't provide autocomplete or linting for these classes.

The Solution

Add these custom settings to your VSCode configuration:

{
  "tailwindCSS.includeLanguages": {
    "ruby": "html"
  },
  "[ruby]": {
    "tailwindCSS.experimental.classRegex": [
      "\\bclass:\\s*[\"']([^\"']*)[\"']",
    ]
  },
  "[erb]": {
    "tailwindCSS.experimental.classRegex": [
      "\\bclass:\\s*[\"']([^\"']*)[\"']",
    ]
  }
}

This configuration does two important things:

1. Tells the Tailwind extension to treat Ruby files as HTML
2. Provides a regex pattern to identify Tailwind classes in both Ruby and ERB files

Happy coding with Phlex and Tailwind!