Skip to content
TyrnBeta

Tailwind CSS

Tailwind CSS support is built in. It adds the Tailwind language server next to the language’s own server, so you get class name completions, hover previews of the generated CSS, and diagnostics.

It is on by default for HTML, CSS, JavaScript, TypeScript, TSX, Astro, Svelte, Vue, PHP, ERB, HTML+ERB and HEEx files. Like other servers written in JavaScript, it runs on Node. See Configuring languages.

Configure the server

Options go under lsp.tailwindcss-language-server.settings. For example, to complete class names inside helper functions and custom patterns:

settings.json
{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "classFunctions": ["cva", "cx"],
        "experimental": {
          "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
        }
      }
    }
  }
}

Tyrn turns on emmetCompletions and a default includeLanguages map unless you set them. See the Tailwind CSS IntelliSense settings for everything the server accepts.

Class names outside class

The server finds class names in class and className attributes. For code that assigns classes in scripts, add patterns to classRegex. For example, for the DOM classList and className APIs in TypeScript:

settings.json
{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": [
            "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.add\\(['\"]([^'\"]*)['\"]"
          ]
        }
      }
    }
  }
}

Tailwind features in CSS files

For full completions on @apply, @layer and @theme in CSS files, use the Tailwind-aware CSS server in place of the default CSS server:

settings.json
{
  "languages": {
    "CSS": {
      "language_servers": [
        "tailwindcss-intellisense-css",
        "!vscode-css-language-server",
        "..."
      ]
    }
  }
}

Sort classes with Prettier

Install the Prettier plugin in your project, then list it in .prettierrc:

.prettierrc
{ "plugins": ["prettier-plugin-tailwindcss"] }

Tyrn uses the Prettier in your project, so the plugin runs when you format. See Configuring languages.