Important

This plugin is a community project and is NOT officialy supported by Tailwind Labs.

tailwind-tools.nvim

Unofficial Tailwind CSS integration and tooling for Neovim using the built-in LSP client and treesitter.

Contents

• Features
• Prerequisites
• Installation
• Configuration
• Commands
• Utilities
• Related projects
• Contributing

Features

The plugin works with all languages inheriting from html, css and tsx treesitter grammars (php, astro, vue, svelte, ...) and provides the following features:

• Class color hints
• Class concealing
• Class sorting (without prettier-plugin)
• Completion utilities (using nvim-cmp)

Note

Language services like autocompletion, diagnostics and hover are already provided by tailwindcss-language-server.

Prerequisites

• Latest Neovim stable or nightly (recommended)
• tailwindcss-language-server >= v0.0.14 (can be installed using Mason)
• html, css and tsx treesitter grammars (can be installed using nvim-treesitter)

Tip

If you are not familiar with neovim LSP ecosystem check out nvim-lspconfig to learn how to setup the LSP.

Installation

Using lazy.nvim:

-- tailwind-tools.lua
return {
  "luckasRanarison/tailwind-tools.nvim",
  opts = {}
}

Configuration

Important

Neovim nightly is required for vscode-like inline color hints.

Here is the default configuration:

---@type TailwindTools.Option
{
  document_color = {
    enabled = true, -- can be toggled by commands
    kind = "inline", -- "inline" | "foreground" | "background"
    inline_symbol = "󰝤 ", -- only used in inline mode
    debounce = 200, -- in milliseconds, only applied in insert mode
  },
  conceal = {
    symbol = "󱏿", -- only a single character is allowed
    highlight = { -- extmark highlight options, see :h 'highlight'
      fg = "#38BDF8",
    },
  },
}

Commands

Available commands:

• TailwindConcealEnable: enables conceal for all buffers.
• TailwindConcealDisable: disables conceal.
• TailwindConcealToggle: toggles conceal.
• TailwindColorEnable: enables color hints for all buffers.
• TailwindColorDisable: disables color hints.
• TailwindColorToggle: toggles color hints.
• TailwindSort: sorts all classes in the current buffer.
• TailwindSortSelection: sorts selected classes in visual mode.

Utilities

Utility function for highlighting colors in nvim-cmp using lspkind.nvim:

-- nvim-cmp.lua
return {
  "hrsh7th/nvim-cmp",
  dependencies = {
    "luckasRanarison/tailwind-tools.nvim",
    "onsails/lspkind-nvim",
    -- ...
  },
  opts = function()
    return {
      -- ...
      formatting = require("lspkind").cmp_format({
        before = require("tailwind-tools.cmp").lspkind_format
      })
    }
  end
},

Related projects

Here are some related projects:

• tailwindcss-intellisense (official vscode extension)
• tailwind-sorter.nvim (uses external scripts)
• tailwind-fold (vscode extension)
• tailwind-fold.nvim
• document-color.nvim (archieved)

Contributing

Read the documentation carefully before submitting any issue.

Feature and pull requests are welcome.