Tailwind intellisense

This section describes how to look-up tailwind-classes in different contexts.

General

for every-day usage, leverage the intellisense in your editor (see below)
use the Tailwind documentation to get in-depth understanding of the util-classes and Tailwind-concepts

Visual Studio Code

1) Install the plugin

Install the CS code extension Tailwind CSS IntelliSense.

2) Configuration

To get the extension to work as intended with @ntds, a few config changes has to be applied. After the plugin is installed, do:

Hit cmd + shift + p and type Preferences: Open Settings (JSON)

In settings.json, add the following rules (or edit existing rules to match):

"editor.quickSuggestions": {
        "strings": true
    },
    "tailwindCSS.includeLanguages": {
        "typescriptreact": "javascript",
        "typescript": "javascript",
        "plaintext": "javascript",
        "javascript": "javascript",
        "html": "HTML"
    },
    "tailwindCSS.experimental.classRegex": [
        "tw=\"([^\"]*)", // <div tw="..." />
        "tw='([^']*)", // <div tw='...'' />
        "tw={\"([^\"}]*)", // <div tw={"..."} />
        "tw={'([^'}]*)", // <div tw={'...''} />
        "tw[A-Z][a-z]+=\"([^\"]*)", // <div twDisplay/twMargins/etc..="..." />
        "tw[A-Z][a-z]+='([^']*)", // <div twDisplay/twMargins/etc..='...' />
        "tw[A-Z][a-z]+={\"([^\"}]*)", // <div twDisplay/twMargins/etc..={"..."} />
        "tw[A-Z][a-z]+={'([^'}]*)" // <div twDisplay/twMargins/etc..={'...'} />
    ]

Save the document, and Tailwind IntelliSense should work as intended for @ntds components 🎉

Thanks to Jens Anders for taking the time to dig into this! ⭐

IntelliJ

Documentation is coming...
Look at this IntelliJ-plugin in the meanwhile 👍.