Bring TailwindCSS class autocomplete into Dart files—using regex-based LSP forwarding.
This project sets up a dual LSP configuration in Neovim that:
class: "..."
or similar strings using regex including string arraysTailwind autocomplete doesn't work inside Dart files out of the box. But what if your UI is dynamically generating class names? This bridge gives you Tailwind IntelliSense anywhere—without rewriting your toolchain.
Shown: Dart file with Tailwind class autocomplete from the Tailwind LSP
class: "btn btn-primary"
)This is made possible by Neovim's flexible LSP architecture and a custom Lua config.
>=0.8
nvim-lspconfig
-- inside your LSP config
require('lspconfig').tailwindcss.setup {
capabilities = capabilities, -- Use shared capabilities
-- on_attach is handled by the LspAttach autocommand group
filetypes = {
'dart',
'html',
'css',
'javascript',
'typescript',
'javascriptreact',
'typescriptreact',
'vue',
'svelte',
'rust',
'elixir',
'heex',
'astro',
'glimmer',
'handlebars',
'php',
'erb',
}, -- Include dart and others
root_dir = require('lspconfig').util.root_pattern('tailwind.config.js', 'tailwind.config.cjs', 'tailwind.config.ts', 'package.json', 'pubspec.yaml'),
settings = {
tailwindCSS = {
includeLanguages = { dart = 'html' },
classAttributes = { 'class', 'className', 'style' },
experimental = {
classRegex = {
'[cC]lass[es]?.*\\s*[:=]\\s*[\'"]([^\'"]*)[\'"]',
{
'.*[cC]lass[es]?.*\\s*[:=]\\s*\\[([^\\]]*)\\]\\s*',
'[\'"]([^\'"]+)[\'"]',
},
},
},
validate = true,
},
},
}
end, -- End of lspconfig config function
},