I would love to have support for tailwind classes in kotlinx html. is there a way to enable it?

# kotlinx-html

[Alex Styl]

I would love to have support for tailwind classes in kotlinx html. is there a way to enable it?

[Tim Schraepen]

What do you imagine it looks like, this support for tailwind in kotlinx.html?

[Alex Styl]

I'm sorry. I was not being specific on my question

I would like to have autocomplete of the tailwind classes while writing my css in the classes param of tags in kotlinx html

[Alex Styl]

ie when i type div(classes=" I want to have autocomplete on the tailwind classes for easier discovery

[Tim Schraepen]

I see what you mean.
That'll be difficult to achieve on our own because classes is a String parameter.
Best I can come up with on the spot is something like a object TailWind { val size12 = "size-12" }, which could give you autocomplete after you type TailWind. and ctrl+space it.
But combining them into a space-separated list will be a PITA.
Then we'd have to start looking into something like an enum that has utility for combining:

enum class TailWind(val classVal: String) {
    size12("size-12"),
    textXl("text-xl")
    ;
    operator fun plus(other: TailWind) = listOf(this, other)
    companion object {
        operator fun invoke(vararg classes: TailWind) = listOf(*classes).joinToString(" "){"$it.classVal"}
    }
}

[Alex Styl]

thanks for the suggestion Tim but i'm not interested in maintaining code for this. it's super simple to write strings directly and there are way too many classes generated by tailwind for the typed approach to be useful

what i am looking for in support on the IDE level. IDEA does this already on html but it doesn't do it for Kotlin files

[Alex Styl]

actually i realized that i have not enabled tailwind support for kt files. kinda hidden in that doc. investigating

[Alex Styl]

Ok figured it out.

To enable tailwind css auto-complete you need to tell the language server to use the classes param.

Full config in the next message

[Alex Styl]

Link to docs on how to do this

Full config to use with the html dsl:

{
  "includeLanguages": {
    "ftl": "html",
    "jinja": "html",
    "jinja2": "html",
    "smarty": "html",
    "tmpl": "gohtml",
    "cshtml": "html",
    "vbhtml": "html",
    "razor": "html",
    "kt": "html"
  },
  "files": {
    "exclude": [
      "**/.git/**",
      "**/.hg/**",
      "**/.svn/**",
      "**/node_modules/**",
      "**/.yarn/**",
      "**/.venv/**",
      "**/venv/**",
      "**/.next/**",
      "**/.parcel-cache/**",
      "**/.svelte-kit/**",
      "**/.turbo/**",
      "**/__pycache__/**"
    ]
  },
  "emmetCompletions": true,
  "classAttributes": [
    "class",
    "className",
    "ngClass",
    "classes"
  ],
  "colorDecorators": true,
  "showPixelEquivalents": true,
  "rootFontSize": 16,
  "hovers": true,
  "suggestions": true,
  "codeActions": true,
  "validate": true,
  "lint": {
    "invalidScreen": "error",
    "invalidVariant": "error",
    "invalidTailwindDirective": "error",
    "invalidApply": "error",
    "invalidConfigPath": "error",
    "cssConflict": "warning",
    "recommendedVariantOrder": "warning"
  },
  "experimental": {
    "configFile": null,
    "classRegex": []
  }
}

[Tim Schraepen]

Nice find!

[Alex Styl]

the only thing im missing is having my custom classes from my .css file being auto completed.

havent figured out how to have that yet, but let's important than the tailwind stuff

[skominas.ainis]

Sweet

[Cies Breijs]

Wow! Nice one bro. Maybe put this in the readme?

I have Tailwind watching setup (through Gradle Node Plugin -- not the fastest way to do it I guess). It uses PostCSS and recompiles in the background. In dev mode the generated css file is not cached or bundled in the app, but always re-served from disk. This already helped me a lot...

[Václav Benes]

Hi , @Alex Styl which version of tailwind do you have? I am struggling with suggestions , but I see colors inlined.