twind.el is an Emacs frontend to the Tailwind CSS Cheat Sheet.
Instead of opening the cheatsheet on browser, it lets you enter a class name by typing part of the CSS rule.
As the original resource says, never memorize something that you can look up.
It doesn’t load your tailwind.config.js.
If you have defined a custom theme, you can just type its CSS classes!
twind.el is only aimed at helping with initial adoption of Tailwind.
If you want smart completion for your own Tailwind theme, you will need a language server such as this one.
twind-insert-class-from-cheatsheet command lets you insert class names by completing the built-in CSS rules of Tailwind.
You can bind the command in web-mode-map, tsx-ts-mode-map, etc.
It also supports multiple classes in one shot by separating rules with semicolon (;).
twind-insert-css-from-cheatsheet command lets you insert CSS rules from the cheatsheet.
This can be used to replicate the common style in a non-Tailwind project.
It also supports referencing documentation from the Tailwind documentation and MDN CSS. If you are using embark, you can use the following setup:
(with-eval-after-load 'embark
(defvar-keymap twind-css-rule-embark-map
:parent embark-general-map
:doc "Embark keymap for twind CSS."
"d" #'twind-reference-tailwind
"m" #'twind-reference-mdn-css)
(add-to-list 'embark-keymap-alist '(twind-css-rule . twind-css-rule-embark-map)))