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

• Make sure conceallevel is set to 2 in your config OR.

:set conceallevel=2

• Set concealcursor to an empty string to expand class when on cursorline:

:set concealcursor=

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

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