Proposal: Documentation for Tailwind CSS LSP setup for autocompletion

[azyarashi]

While it may not be necessary, since configuring the LSP or editor-specific LSP extensions allows Tailwind CSS completion to work in Typst, how about adding a guide for it?

For example, it would be good to include the following:

• Mention that it is based on Tailwind CSS v3, not v4.
• Mention that the content field of a v3 Tailwind CSS config file named tailwind.config.{js,cjs,mjs,ts,cts,mts} needs to include the typ extension (for example, ./**/*.typ). (and css?)
• Note that plugins configuration do not work, at least in the current version.
• Mention that it is necessary to include Typst in the LSP setting includeLanguages (for example, "typst": "html").
• Mention the need to support the Typst format in the LSP setting experimental.classRegex (for example, the simplest case that does not handle syntax in code or string escaping would be ["class\\s*:\\s*\"([^\"]*)\"", "([^\"]*)"]).

Below are examples of how to implement this:

1. Editor Settings (e.g., VS Code settings.json)

{
  "tailwindCSS.includeLanguages": {
    "typst": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    ["class\\s*:\\s*\"([^\"]*)\"", "([^\"]*)"]
  ]
}

2. Tailwind CSS config file (tailwind.config.ts)

import config from "./config.json" with { type: "json" };

import type { Config } from "tailwindcss";

export default {
	content: ["./**/*.{js}"],
	...config,
} satisfies Config;

and css

@import "tailwindcss";

@config "./tailwind.config.ts";

3. Typst Usage (main.typ)

#show: tailwind-page.with(config: json("config.json"))

[wensimehrp]

I thought of defining related Typst variables (e.g. typewind) but that doesn't really sound like a smart idea, since tailwind classes could have arbitrary CSS and it is simply impossible to cover all cases (e.g. grid-cols-[1fr_min-content_auto_400px_<blah blah blah and foo bar baz>]).

Using existing LSP extensions for Tailwind in web stuff is definitely a better idea.

[wensimehrp]

Also I believe that encre-css only supports tailwind v4

[azyarashi]

As I completely overlooked that, Thanks!
That said, it does add a lot of extra config files (js, css, json...)

[wensimehrp]

That said, it does add a lot of extra config files (js, css, json...)

I thought only the configuration file needs to be changed? And there's no need to add a bunch of css and javascript stuff?