Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for .elm files #84

Closed
eimfach opened this issue Oct 29, 2019 · 8 comments
Closed

Support for .elm files #84

eimfach opened this issue Oct 29, 2019 · 8 comments
Labels
enhancement New feature or request

Comments

@eimfach
Copy link

eimfach commented Oct 29, 2019

It would be awesome if this extensions also would support elm-lang.
Elm files use css classes like so :

view =
    div [class "bg-gray-500", classList [("bg-gray-100", True), ("bg-gray-300", False)] ] []
@supermacro
Copy link

I second this request!

@bradlc bradlc added the enhancement New feature or request label Apr 28, 2020
@prescientmoon
Copy link

Not exactly the same thing but I'd like to be able to use this with purescript-halogen. Just being able to specify a regex would be the best solution (I think)

@ibirrer
Copy link

ibirrer commented Nov 8, 2020

Probably related to tailwindlabs/tailwindcss#7553

@ibirrer
Copy link

ibirrer commented Nov 11, 2020

Until this issue or tailwindlabs/tailwindcss#7553 is resolved, you might want to try the fork at https://github.com/ibirrer/tailwindcss-intellisense/releases/tag/0.4.3-elm

@bradlc
Copy link
Contributor

bradlc commented Dec 1, 2020

I think this is covered by tailwindlabs/tailwindcss#7553 as @ibirrer said. You can enable completions in the example you provided with these settings:

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

See my recent comment over on tailwindlabs/tailwindcss#7553 for more info

@maxhoffmann
Copy link

I’ve added a couple more regex patterns to my configuration to also support completions when using classList and the pipe operator.

👉 current version of my Tailwind CSS settings for Elm

@Janiczek
Copy link

For whoever is trying this out in vim, this has worked for me:

Plug 'neovim/nvim-lspconfig'
Plug 'williamboman/nvim-lsp-installer'

and then

lua << EOF
require("nvim-lsp-installer").setup({
  ensure_installed = { "tailwindcss" }
})

require('lspconfig').tailwindcss.setup{
  filetypes = { "html", "elm" },
  init_options = {
    userLanguages = {
      elm = "html",
      html = "html"
    }
  },
  settings = {
    tailwindCSS = {
      includeLanguages = {
        elm = "html",
        html = "html"
      },
      classAttributes = { "class", "className", "classList", "ngClass" },
      experimental = {
        classRegex = {
          "\\bclass[\\s(<|]+\"([^\"]*)\"",
          "\\bclass[\\s(]+\"[^\"]*\"[\\s+]+\"([^\"]*)\"",
          "\\bclass[\\s<|]+\"[^\"]*\"\\s*\\+{2}\\s*\" ([^\"]*)\"",
          "\\bclass[\\s<|]+\"[^\"]*\"\\s*\\+{2}\\s*\" [^\"]*\"\\s*\\+{2}\\s*\" ([^\"]*)\"",
          "\\bclass[\\s<|]+\"[^\"]*\"\\s*\\+{2}\\s*\" [^\"]*\"\\s*\\+{2}\\s*\" [^\"]*\"\\s*\\+{2}\\s*\" ([^\"]*)\"",
          "\\bclassList[\\s\\[\\(]+\"([^\"]*)\"",
          "\\bclassList[\\s\\[\\(]+\"[^\"]*\",\\s[^\\)]+\\)[\\s\\[\\(,]+\"([^\"]*)\"",
          "\\bclassList[\\s\\[\\(]+\"[^\"]*\",\\s[^\\)]+\\)[\\s\\[\\(,]+\"[^\"]*\",\\s[^\\)]+\\)[\\s\\[\\(,]+\"([^\"]*)\""
        }
      },
      lint = {
        cssConflict = "warning",
        invalidApply = "error",
        invalidConfigPath = "error",
        invalidScreen = "error",
        invalidTailwindDirective = "error",
        invalidVariant = "error",
        recommendedVariantOrder = "warning"
      },
      validate = true
    }
  }
}
EOF

@ericwern
Copy link

Does anyone have a working config for intellij?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

8 participants