search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.84k stars 195 forks source link

Plugins is not triggering in astro files #588

Closed snyssen closed 2 years ago

snyssen commented 2 years ago

What version of Tailwind CSS IntelliSense are you using?

v0.8.6

What version of Tailwind CSS are you using?

v3.1.7

What package manager are you using?

npm

What operating system are you using?

Fedora

Reproduction URL

I am just testing Astro with tailwind at the moment, so I do not have any repos setup. Here is what I did:

  1. Create a new Astro project: npm create astro@latest.
  2. Select the basic template (just adds a single astro page with a layout and a component to go with).
  3. Add Tailwind to the project: astro add tailwind. This installs the @astrojs/tailwind package which itself reference the tailwindcss
  4. Try and modify any of the .astro files

Describe your issue

Since astro pages are essentially html pages with some more fluff, I would expect this plugin to be able to provide intellisense inside of them. So, I modified the tailwindCSS.includeLanguages setting with the following value:

"tailwindCSS.includeLanguages": {
  "astro": "html"
}

but I still don't have any intellisense support for tailwind in .astro files. Am I missing something or is tailwind intellisense unable to work in these files?

In case you are not familiar with Astro, here is how one of its files look like:

---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Counter from "../components/Counter/Index";
import Clock from "../components/Clock/Index";
---

<Layout title="Welcome to Astro.">
    <main>
        <h1 class="">Welcome to <span class="text-gradient">Astro</span></h1>
        <ul role="list" class="link-card-grid">
            <Card href="https://docs.astro.build/" title="Documentation"
                body="Learn how Astro works and explore the official API docs." />
            <Card href="https://astro.build/integrations/" title="Integrations"
                body="Supercharge your project with new frameworks and libraries." />
            <Card href="https://astro.build/themes/" title="Themes"
                body="Explore a galaxy of community-built starter themes." />
            <Card href="https://astro.build/chat/" title="Chat"
                body="Come say hi to our amazing Discord community. ❤️" />
        </ul>
        <Counter client:load />
        <Clock client:visible />
    </main>
</Layout>

<style>
    :root {
        --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
    }

    h1 {
        margin: 2rem 0;
    }

    main {
        margin: auto;
        padding: 1em;
        max-width: 60ch;
    }

    .text-gradient {
        font-weight: 900;
        background-image: var(--astro-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 100% 200%;
        background-position-y: 100%;
        border-radius: 0.4rem;
        animation: pulse 4s ease-in-out infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            background-position-y: 0%;
        }

        50% {
            background-position-y: 80%;
        }
    }

    .instructions {
        line-height: 1.6;
        margin: 1rem 0;
        background: #4f39fa;
        padding: 1rem;
        border-radius: 0.4rem;
        color: var(--color-bg);
    }

    .instructions code {
        font-size: 0.875em;
        border: 0.1em solid var(--color-border);
        border-radius: 4px;
        padding: 0.15em 0.25em;
    }

    .link-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
        gap: 1rem;
        padding: 0;
    }
</style>

I also checked the plugin output, but it doesn't show any error:

Found Tailwind CSS config file: /home/snyssen/source/repos/astro-playground/tailwind.config.cjs
Loaded postcss v8.4.14: /home/snyssen/source/repos/astro-playground/node_modules/postcss
Loaded tailwindcss v3.1.7: /home/snyssen/source/repos/astro-playground/node_modules/tailwindcss

warn - The RTL features in Tailwind CSS are currently in preview.
warn - Preview features are not covered by semver, and may be improved in breaking ways at any time.

Also note that intellisense is working fine in one of the .tsx file I added to the same project (a Preact component).

bradlc commented 2 years ago

Hey @snyssen. I can't reproduce this. Please can you share a couple things:

snyssen commented 2 years ago

Hi @bradlc, thank you for your response. Yes of course, here they are:

{
    "typescript.updateImportsOnFileMove.enabled": "always",
    "extensions.ignoreRecommendations": false,
    "task.slowProviderWarning": [
        "typescript"
    ],
    "workbench.startupEditor": "newUntitledFile",
    "sync.autoDownload": true,
    "sync.autoUpload": true,
    "indenticator.inner.showHighlight": true,
    "indenticator.inner.showHover": true,
    "cSpell.userWords": [
        "dragable",
        "dropzone",
        "endregion",
        "healthcheck",
        "nextcloud",
        "photoprism",
        "snyssen",
        "speedtest",
        "treeview",
        "wikijs",
        "Youtube"
    ],
    "editor.fontSize": 14,
    "sync.gist": SENSITIVE,
    "gitlens.blame.dateFormat": "",
    "workbench.editorAssociations": {
        "*.md": "vscode.markdown.preview.editor",
        "*.ipynb": "jupyter.notebook.ipynb"
    },
    "workbench.colorTheme": "Monokai Dimmed",
    "editor.fontFamily": "'Cascadia Code','Victor Mono medium', 'Rec Mono SemiCasual', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "todo-tree.tree.showScanModeButton": false,
    "workbench.iconTheme": "vscode-icons",
    "editor.fontLigatures": true,
    "glassit.alpha": 255,
    "yaml.schemas": {
        "file:///home/snyssen/.vscode/extensions/atlassian.atlascode-2.10.12/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
    },
    "atlascode.jira.enabled": true,
    "atlascode.jira.jqlList": [
        SENSITIVE
    ],
    "atlascode.bitbucket.enabled": true,
    "git.autofetch": true,
    "terminal.explorerKind": "external",
    "atlascode.outputLevel": "info",
    "vsicons.dontShowNewVersionMessage": true,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "atlascode.jira.lastCreateSiteAndProject": {
        "siteId": SENSITIVE,
        "projectKey": "CAS"
    },
    "editor.formatOnSave": true,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "omnisharp.path": "latest",
    "redhat.telemetry.enabled": true,
    "gitlab.instanceUrl": SENSITIVE,
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIXME",
        "TODO",
        "XXX",
        "[ ]",
        "[x]"
    ],
    "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
    "terminal.external.linuxExec": "konsole",
    "peacock.favoriteColors": [
        {
            "name": "Angular Red",
            "value": "#dd0531"
        },
        {
            "name": "Azure Blue",
            "value": "#007fff"
        },
        {
            "name": "JavaScript Yellow",
            "value": "#f9e64f"
        },
        {
            "name": "Mandalorian Blue",
            "value": "#1857a4"
        },
        {
            "name": "Node Green",
            "value": "#215732"
        },
        {
            "name": "React Blue",
            "value": "#61dafb"
        },
        {
            "name": "Something Different",
            "value": "#832561"
        },
        {
            "name": "Svelte Orange",
            "value": "#ff3d00"
        },
        {
            "name": "Vue Green",
            "value": "#42b883"
        },
        {
            "name": "Peaceful violet",
            "value": "#7364e1"
        }
    ],
    "files.associations": {
        ".env": "dotenv",
        "*.yml": "ansible",
        "docker-compose.yml": "dockercompose"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.acceptSuggestionOnCommitCharacter": false,
    "git.confirmSync": false,
    "gitlab.showPipelineUpdateNotifications": true,
    "gitlab.ignoreCertificateErrors": true,
    "git.enableSmartCommit": true,
    "odata.completion.enable": true,
    "odata.diagnostic.enable": true,
    "odata.format.syntax": true,
    "editor.bracketPairColorization.enabled": true,
    "python.defaultInterpreterPath": "/bin/python",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.customGlyphs": false,
    "terminal.integrated.enableBell": true,
    "editor.renderWhitespace": "all",
    "editor.multiCursorModifier": "ctrlCmd",
    "cSpell.enableFiletypes": [
        "ansible",
        "ansible-jinja"
    ],
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "ansibleServer.trace.server": "verbose",
    "files.exclude": {
        "**/.trunk/*out": true
    },
    "trunk.trunkGrayOutNonBlockingIssues": false,
    "files.watcherExclude": {
        "**/.trunk/*out": true
    },
    "npm.keybindingsChangedWarningShown": true,
    "files.trimTrailingWhitespace": true,
    "files.trimFinalNewlines": true,
    "files.insertFinalNewline": true,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.includeLanguages": {
        "astro": "html"
    },
}
aaron-bond.better-comments@3.0.2
adrianwilczynski.csharp-to-typescript@1.12.1
Angular.ng-template@14.1.0
astro-build.astro-vscode@0.20.4
atlassian.atlascode@2.10.12
bmewburn.vscode-intelephense-client@1.8.2
bradlc.vscode-tailwindcss@0.8.6
brapifra.phpserver@3.0.2
craigthomas.supersharp@0.1.4
cyrilletuzi.angular-schematics@5.2.6
DavidAnson.vscode-markdownlint@0.47.0
dbaeumer.vscode-eslint@2.2.6
DotJoshJohnson.xml@2.5.1
eamodio.gitlens@12.1.2
eg2.vscode-npm-script@0.3.28
esbenp.prettier-vscode@9.5.0
gaoshan0621.csharp-format-usings@0.0.4
GitLab.gitlab-workflow@3.48.0
golang.go@0.35.1
Gruntfuggly.todo-tree@0.0.215
johnpapa.vscode-peacock@4.0.1
k--kato.docomment@0.1.31
kreativ-software.csharpextensions@1.7.0
leo-labs.dotnet@1.3.0
maptz.regionfolder@1.0.17
me-dutour-mathieu.vscode-github-actions@3.0.1
mechatroner.rainbow-csv@2.4.0
Mikael.Angular-BeastCode@10.0.3
mikestead.dotenv@1.0.1
mrmlnc.vscode-scss@0.10.0
ms-azuretools.vscode-docker@1.22.1
ms-dotnettools.csharp@1.25.0
ms-python.python@2022.12.0
ms-python.vscode-pylance@2022.8.10
ms-toolsai.jupyter@2022.7.1002181843
ms-toolsai.jupyter-keymap@1.0.0
ms-toolsai.jupyter-renderers@1.0.9
ms-vscode-remote.remote-containers@0.241.3
ms-vscode.vscode-typescript-tslint-plugin@1.3.4
oderwat.indent-rainbow@8.3.1
patcx.vscode-nuget-gallery@0.0.24
pranaygp.vscode-css-peek@4.2.0
pucelle.vscode-css-navigation@1.13.3
redhat.ansible@0.11.10
redhat.vscode-commons@0.0.6
redhat.vscode-yaml@1.9.1
ritwickdey.LiveServer@5.7.5
rogalmic.bash-debug@0.3.9
s-nlf-fh.glassit@0.2.4
Shan.code-settings-sync@3.4.3
SirTori.indenticator@0.7.0
stansw.vscode-odata@0.1.0
streetsidesoftware.code-spell-checker@2.3.5
syler.sass-indented@1.8.22
trunk.io@3.1.1
VisualStudioExptTeam.vscodeintellicode@1.2.22
vscode-icons-team.vscode-icons@11.14.0
WakaTime.vscode-wakatime@18.1.6
whtouche.vscode-js-console-utils@0.7.0
wix.vscode-import-cost@3.3.0
YuTengjing.open-in-external-app@0.5.0
Zignd.html-css-class-completion@1.20.0

I hope this will help. If I can provide any other information or if you need me to try out anything, please just let me know.

bradlc commented 2 years ago

Thanks for sharing. Are you certain that it isn't working? If you have the following in an Astro file and place your cursor between the quote marks, pressing Ctrl+Space doesn't show any completions?

<div class=""></div>
snyssen commented 2 years ago

Oh it was simply that? Sorry to have wasted your time then... It indeed works once I press Ctrl+Space.

But I don't really understand, what does this shortcut do? I was expecting the auto-complete to automatically start once I type the first letter in the class space, as it had always done in plain html. I tried a few times and it seems every time I want the auto-complete help I have to press Ctrl+Space first to trigger it, even if it triggered previously in the same file. Is this the expected behaviour?

bradlc commented 2 years ago

No worries! It's to do with how VS Code triggers completions. Extensions can specify "trigger characters" that will trigger completions. For example we register " as a trigger character. The problem is that if you don't actually type the quote (e.g. it's inserted automatically by a snippet) then it doesn't trigger. One thing that you can try is to configure the editor.quickSuggestions setting:

"editor.quickSuggestions": {
  "strings": true
}

We recommend this setting for everyone using the extension, as it causes VS Code to trigger completions in more cases. And of course, you can always manually trigger completions using VS Code's Trigger Suggest command (Ctrl+Space). I hope that helps!