TailwindCSS Suggestion for CSSer

You don't have to remeber all the Tailwind Utility Class Names. Just use this!

Features

• Suggesting TailwindCSS ClassName from vanilla CSS

Active Conditions of Suggestion

• inside class attributes
• after @apply

Extension Settings

• tailwindCSSForCSSer.suggestions.classAttributes: Enable autocomplete suggestions in class attributes.

• tailwindCSSForCSSer.suggestions.atApply: Enable autocomplete suggestions after @apply.

• tailwindCSSForCSSer.additionalLanguages.classAttributes: Enable features in languages that are not supported by default in class attributes.

• tailwindCSSForCSSer.disableLanguages.classAttributes: Disable features in languages that are supported by default in class attributes. (e.g. html typescriptreact etc..)

• tailwindCSSForCSSer.additionalLanguages.atApply: Enable features in languages that are not supported by default after @apply.

• tailwindCSSForCSSer.disableLanguages.atApply: Disable features in languages that are supported by default after @apply. (e.g. html typescriptreact etc..)

{
  // default settings below
  "tailwindCSSForCSSer.suggestions.classAttributes": true,
  "tailwindCSSForCSSer.suggestions.atApply": true,
  "tailwindCSSForCSSer.additionalLanguages.classAttributes": [],
  "tailwindCSSForCSSer.disableLanguages.classAttributes": [],
  "tailwindCSSForCSSer.additionalLanguages.atApply": [],
  "tailwindCSSForCSSer.disableLanguages.atApply": []
}

Known Issues

Not all TailwindCSS class names are supported (complicated shadow css ..etc)

TODO

• suggestion in class attribute
• suggestion after @apply
• limit active condition more precisely
• support arbitrary value
• support colors

Contributors

Iguchi Tomokatsu 💻

Gyo Tamura 💻

ym-darake 💻