Tailwind CSS

Gram has built-in support for Tailwind CSS autocomplete, linting, and hover previews.

• Language Server: tailwindlabs/tailwindcss-intellisense

Configuration

To configure the Tailwind CSS language server, refer to the extension settings and add them to the lsp section of your settings.json:

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

Languages which can be used with Tailwind CSS in Gram:

• Astro
• CSS
• ERB
• Gleam
• HEEx
• HTML
• TypeScript
• JavaScript
• PHP
• Svelte
• Vue

Prettier Plugin

Gram supports Prettier out of the box, which means that if you have the Tailwind CSS Prettier plugin installed, adding it to your Prettier configuration will make it work automatically:

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