Tailwind-fold.nvim

Neovim plugin to conceal long class attributes.

Requirements

Requires nvim-treesitter

Installation

Using lazy.nvim in lua

{
  'razak17/tailwind-fold.nvim',
  opts= {},
  dependencies = { 'nvim-treesitter/nvim-treesitter' },
  ft = { 'html', 'svelte', 'astro', 'vue', 'typescriptreact', 'php', 'blade' },
},

Using vim-plug in vimscript

call plug#begin()
Plug 'nvim-treesitter/nvim-treesitter'
Plug 'razak17/tailwind-fold.nvim'
(...)
call plug#end()

lua << EOF
  require("tailwind-fiold").setup {
    ft = { 'html', 'svelte', 'astro', 'vue', 'typescriptreact', 'php', 'blade' },
  }
EOF

• Astronvim

return {
    'razak17/tailwind-fold.nvim',
    opts = {},
    dependencies = {'nvim-treesitter/nvim-treesitter'},
    event = "VeryLazy",
    config = function()
        require('tailwind-fold').setup({ft = {'html', 'twig'}})
    end
}

Showcase

Default Options

{
    enabled = true,
    symbol = "…", -- 󱏿
    highlight = {
        fg = "#38BDF8", -- [[ symbol color ]]
    },
    ft = {
        "html",
        "svelte",
        "astro",
        "vue",
        "tsx",
        "php",
        "blade",
        "eruby",
        "edge",
        'htmldjango',
    }
},

Configuration

• Make sure to install treesitter parsers for enabled languages. For example:

:TSInstall html

Usage

The plugin is activated automatically

:TailwindFoldDisable, :TailwindFoldEnable and :TailwindFoldToggle are also available to change fold state.

Development and Contributions

Feel free to open and issue or create a PR if a filetype you are using is not supported yet.

Resources and Acknowledgements

• tailwind-tools (for treesitter queries and helper code)

All credit goes to the author of this gist, which made the initial version of this plugin possible.

You can use it if you prefer not to install a plugin