https://github.com/airblade/vim-tailwind
A Vim plugin to autocomplete Tailwind classes without LSP. Also looks up Tailwind classes' CSS properties.
https://github.com/airblade/vim-tailwind
completion tailwindcss vim vim-plugin
Last synced: over 1 year ago
JSON representation
A Vim plugin to autocomplete Tailwind classes without LSP. Also looks up Tailwind classes' CSS properties.
- Host: GitHub
- URL: https://github.com/airblade/vim-tailwind
- Owner: airblade
- License: mit
- Created: 2023-03-10T15:37:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-22T12:14:16.000Z (over 2 years ago)
- Last Synced: 2025-02-26T18:57:02.978Z (over 1 year ago)
- Topics: completion, tailwindcss, vim, vim-plugin
- Language: Vim Script
- Homepage:
- Size: 2.95 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# vim-tailwind
A Vim plugin to autocomplete Tailwind class names without LSP.
It also lets you look up a Tailwind class's CSS properties.
## Screenshots
Showing completions for `text-zinc-`:
Showing class information for `text-zinc-600` in the command-line area:
## Tailwind version
v3.3.5
## Installation
Install like every other Vim plugin :)
## Configuration
These options customise the completion items (see `:help complete-items`).
- `g:tailwind_complete_item_info` - whether to set the `info` text (default `v:true`).
- `g:tailwind_complete_item_menu` - whether to set the `menu` text (default `v:true`).
- `g:tailwind_complete_item_menu_length` - maximum length of the `menu` text (default `40`).
- `g:tailwind_complete_items_max` - maximum number of items to show (default: `50`).
## Usage
### Autocompletion
For user-defined autocompletion (via ``):
```vim
setlocal completefunc=tailwind#Complete
```
Or for omnicompletion (via ``):
```vim
setlocal omnifunc=tailwind#Complete
```
I have the following snippet in my vimrc to set this up:
```vim
function! s:is_tailwind()
return !empty(findfile('tailwind.config.js', '.;')) ||
\ !empty(findfile('config/tailwind.config.js', '.;'))
endfunction
autocmd BufEnter *.html,*.slim if s:is_tailwind() |
\ setlocal omnifunc=tailwind#Complete |
\ endif
```
### Lookup
Unless you have `K` mapped already, press `K` in normal mode with your cursor on a Tailwind class.
To map some other key, e.g. `gk`:
```vim
nmap gk (tailwind-lookup)
```
## Caveats
The plugin ignores modifiers, e.g. `sm:` or `hover:`. They affect when the CSS is applied, not what the CSS actually is, so they are irrelevant here.
The plugin ignores `@media` at-rules. This only affects the [`.container`](https://tailwindcss.com/docs/container) class.
## Intellectual property
Copyright Andrew Stewart. Released under the MIT licence.