Docs

Tailwind

Style a Proa app, with autocomplete in Rust files.

Proa templates use Tailwind classes inside class="..." attributes and tw_join!() macros in Rust files. With a few VS Code settings, you get full autocomplete, color swatches, and class linting, the same experience you'd have in a .tsx file.

Prerequisites

• Tailwind CSS IntelliSense extension installed in VS Code
• A Tailwind v4 CSS entrypoint, such as styles/input.css in generated sites.

Settings

Add the following to your workspace .vscode/settings.json:

{
  // 1. Tell the extension to activate in Rust files.
  //    Maps the "rust" language ID to "html" so it recognises class attributes.
  "tailwindCSS.includeLanguages": {
    "rust": "html"
  },

  // 2. Point to your Tailwind v4 CSS entrypoint.
  "tailwindCSS.experimental.configFile": {
    "styles/input.css": "**/*.rs"
  },

  // 3. Custom regex patterns for Proa idioms.
  "tailwindCSS.experimental.classRegex": [
    // class="..." inside html! macro
    "class=\"([^\"]*?)\"",

    // tw_join!("...", "...") — two-level match:
    //   outer regex captures the contents of tw_join!(...)
    //   inner regex extracts each quoted string
    ["tw_join!\\(([^)]*)\\)", "\"([^\"]*)\""]
  ],

  // 4. Auto-trigger suggestions inside string literals
  //    so you don't have to press Ctrl+Space each time.
  "editor.quickSuggestions": {
    "strings": true
  }
}

What each setting does

tailwindCSS.includeLanguages

The extension only activates for a built-in set of languages (HTML, CSS, JSX, etc.). This setting adds Rust to that list by mapping its VS Code language ID to html, which tells the extension to look for HTML-style class attributes.

tailwindCSS.experimental.configFile

For Tailwind v4, point the extension at the CSS entrypoint that imports Tailwind and declares the project's sources and theme. The glob **/*.rs applies that stylesheet to Rust files throughout the workspace.

tailwindCSS.experimental.classRegex

By default the extension only triggers inside class or className attributes in markup. This setting adds two patterns:

Pattern 1, class="([^\"]*?)" matches class attributes in html!:

html! {
    <div class="flex gap-2 items-center">  // autocomplete here

Pattern 2, the [container, classlist] array matches tw_join!():

pub const BUTTON_BASE: &str = tw_join!(
    "inline-flex",    // autocomplete here
    "items-center",   // and here
    "rounded-md",     // and here
);

The outer regex captures everything inside the parentheses; the inner regex then extracts each individual "..." string.

editor.quickSuggestions

By default VS Code suppresses auto-suggestions inside string literals. Since every Tailwind class in Proa lives inside a "...", this setting enables inline suggestions so autocomplete appears as you type.

Verify it works

1. Open any .rs file that uses html! or html_sync! (for example, src/pages/home.rs)
2. Place your cursor inside a class="..." attribute
3. Start typing a Tailwind class, you should see autocomplete suggestions with color swatches
4. Open a local component recipe file if your app has one
5. Place your cursor inside a tw_join!("...") string, autocomplete should work there too
6. Try typing a custom theme color like bg-primary, it should appear with your theme's color preview

Tip: If suggestions don't appear, run Tailwind CSS: Restart IntelliSense Server from the VS Code command palette (Cmd+Shift+P).

Troubleshooting