Not working with Tailwindcss 3.0.1

[getnashty]

I just created two new react apps, one using Gatsby, and one using Create-react-app.

In the gatsby app - Coc tailwind works great!

But with the fresh create-react-app, I can't get it to work..

I'm following these instructions: https://tailwindcss.com/docs/guides/create-react-app, but using the typescript template. I've blown away the directory and tried twice to no avail.

When I check CocList > Extensions, it says tailwind is running..

my config looks like:

module.exports = {
    purge: ["./src/**/*.{js,jsx,ts,tsx}"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

What else can I check?

[getnashty]

looks like this breaks with tailwindcss 3.0.0... when I moved the react projects version down to 2.2.19 it worked fine

[thekaganugur]

I'm switching over to built-in lsp because of this issue. It's a nightmare. Hours of configuration is wasted.

Is there any update on this issue? Thanks.

[izaguirrejoe]

Also waiting for fix

[cwahlfeldt]

Me too. The vscode plugin seems to be working fine. Maybe its just a matter of upgrading the tailwind intellisense sub module?

[thekaganugur]

Here is a workaround for using LSP directly. You will need to install lsp globally.

yarn global add @tailwindcss/language-server

  "languageserver": {
    "tailwind-lsp": {
      "command": "tailwindcss-language-server",
      "args": ["--stdio"],

      "filetypes": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
      ],

      "rootPatterns": [
        "tailwind.config.js",
        "tailwind.config.ts",
        "postcss.config.js",
        "postcss.config.ts",
        "package.json",
        "node_modules",
        ".git"
      ],
      "settings": {
        "tailwindCSS": {
          "validate": true,
          "lint": {
            "cssConflict": "warning",
            "invalidApply": "error",
            "invalidScreen": "error",
            "invalidVariant": "error",
            "invalidConfigPath": "error",
            "invalidTailwindDirective": "error",
            "recommendedVariantOrder": "warning"
          },
          "classAttributes": ["class", "className", "classList", "ngClass"],
          "experimental": {}
        }
      }
    }
  }

[terminalkitten]

@kgnugur

Hi, thanks for your work-around, it's indeed enabling code-completion for tailwindcss > 3.0.x.

But i'm also using tailwind in django-html templates, and I'm having some trouble figuring out how to enable it with your config?

• If I set filetype from htmldjango -> html the LS picks up and starts code-completion / enhancements for the file, but I lose some handy features from coc-htmldjango.

I've tried the following configuration with no success:

"languageserver": {
    "tailwind-lsp": {
      "command": "tailwindcss-language-server",
      "args": ["--stdio"],
      "filetypes": [
        "html",
        "htmldjango",
        "django-html",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
      ],

      "rootPatterns": [
        "tailwind.config.js",
        "tailwind.config.ts",
        "postcss.config.js",
        "postcss.config.ts",
        "package.json",
        "node_modules",
        ".git"
      ],
      "settings": {
        "tailwindCSS": {
          "includeLanguages": {
            "htmldjango": "html",
            "django-html": "html"
          },
          "validate": true,
          "lint": {
            "cssConflict": "warning",
            "invalidApply": "error",
            "invalidScreen": "error",
            "invalidVariant": "error",
            "invalidConfigPath": "error",
            "invalidTailwindDirective": "error",
            "recommendedVariantOrder": "warning"
          },
          "classAttributes": ["class", "className", "classList"],
          "experimental": {}
        }
      }
    }
}

[legecha]

Me too. The vscode plugin seems to be working fine. Maybe its just a matter of upgrading the tailwind intellisense sub module?

Also would love an update to this. 0.7.4 is out now with TailwindCSS v3 support. I even tried to fork this and do an upgrade myself but sadly I've not enough experience in this area.

I did notice the submodule needed updating to as the URL has changed from https://github.com/tailwindcss/intellisense to https://github.com/tailwindlabs/tailwindcss-intellisense as well.

[yaegassy]

I created a PR for tailwindcss v3 support on the repository side of coc-tailwindcss. If you are interested, please try it out. https://github.com/iamcco/coc-tailwindcss/pull/70

[AnishDe12020]

Here is a workaround for using LSP directly. You will need to install lsp globally.

yarn global add @tailwindcss/language-server

  "languageserver": {
    "tailwind-lsp": {
      "command": "tailwindcss-language-server",
      "args": ["--stdio"],

      "filetypes": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
      ],

      "rootPatterns": [
        "tailwind.config.js",
        "tailwind.config.ts",
        "postcss.config.js",
        "postcss.config.ts",
        "package.json",
        "node_modules",
        ".git"
      ],
      "settings": {
        "tailwindCSS": {
          "validate": true,
          "lint": {
            "cssConflict": "warning",
            "invalidApply": "error",
            "invalidScreen": "error",
            "invalidVariant": "error",
            "invalidConfigPath": "error",
            "invalidTailwindDirective": "error",
            "recommendedVariantOrder": "warning"
          },
          "classAttributes": ["class", "className", "classList", "ngClass"],
          "experimental": {}
        }
      }
    }
  }

After installing the package, how do I go about using it? I am currently using nvim-cmp (for completion) and nvim-lsp-installer (to manage language servers)

[oieeaaaa]

Here is a workaround for using LSP directly. You will need to install lsp globally.

yarn global add @tailwindcss/language-server

  "languageserver": {
    "tailwind-lsp": {
      "command": "tailwindcss-language-server",
      "args": ["--stdio"],

      "filetypes": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
      ],

      "rootPatterns": [
        "tailwind.config.js",
        "tailwind.config.ts",
        "postcss.config.js",
        "postcss.config.ts",
        "package.json",
        "node_modules",
        ".git"
      ],
      "settings": {
        "tailwindCSS": {
          "validate": true,
          "lint": {
            "cssConflict": "warning",
            "invalidApply": "error",
            "invalidScreen": "error",
            "invalidVariant": "error",
            "invalidConfigPath": "error",
            "invalidTailwindDirective": "error",
            "recommendedVariantOrder": "warning"
          },
          "classAttributes": ["class", "className", "classList", "ngClass"],
          "experimental": {}
        }
      }
    }
  }

Dude, this saved me!