lightyen / vscode-tailwindcss-twin Goto Github PK

View Code? Open in Web Editor NEW

84.0 4.0 9.0 6.6 MB

Tailwind CSS Extension for VS Code (for twin)

License: MIT License

TypeScript 99.88% JavaScript 0.12%

vscode-tailwindcss-twin's Introduction

Tailwind Twin IntelliSense

This is a VSCode Tailwind IntelliSense Extension which supports twin.macro

Install via the Marketplace

Features

auto completion
hover
color decoration
document references
diagnostics

Pack

pnpm install && pnpm package

VSCode Settings

Defaults

{
  "tailwindcss.colorDecorators": "inherit", // inherit from "editor.colorDecorators"
  "tailwindcss.references": true,
  "tailwindcss.diagnostics": {
    "enabled": true,
    "emptyChecking": true,
  },
  "tailwindcss.preferVariantWithParentheses": false,
  "tailwindcss.fallbackDefaultConfig": true,
  "tailwindcss.enabled": true,
  "tailwindcss.jsxPropImportChecking": true,
  "tailwindcss.rootFontSize": 16,
  "tailwindcss.logLevel": "info",
  "tailwindcss.hoverColorHint": "none",
  "tailwindcss.otherLanguages": []
}

Custom CompletionList Panel

// example
{
  "workbench.colorCustomizations": {
    "[One Dark Pro Darker]": {
      "editorHoverWidget.background": "#1f2229e8",
      "editorSuggestWidget.background": "#1f2229e8",
      "editor.wordHighlightBackground": "#0000",
      "editor.wordHighlightBorder": "#3f3f3f3d",
      "editor.wordHighlightStrongBorder": "#3f3f3f3d"
    }
  }
}

Custom Semantic Colors (docs)

{
  "editor.tokenColorCustomizations": {
    "[One Dark Pro Darker]": {
      "textMateRules": [
        {
          "scope": "support.constant.classname.twin",
          "settings": {
            "foreground": "#7ddb89"
          }
        },
        {
          "scope": "entity.other.inherited-class.variant.twin",
          "settings": {
            "foreground": "#c678dd"
          }
        },
        {
          "scope": "support.type.short-css.prop.twin",
          "settings": {
            "foreground": "#5dbeff"
          }
        },
        {
          "scope": "punctuation.section.embedded.short-css",
          "settings": {
            "foreground": "#5dbeff"
          }
        },
        {
          "scope": "support.type.arbitrary-style.prop.twin",
            "settings": {
              "foreground": "#8a88fc"
            }
        },
        {
          "scope": "punctuation.section.embedded.arbitrary-style",
             "settings": {
               "foreground": "#8a88fc"
            }
        },
        {
          "scope": "entity.name.variable.css-value.twin",
          "settings": {
            "foreground": "#abb2bb"
          }
        }
      ]
    }
  }
}

vscode-tailwindcss-twin's People

Contributors

Stargazers

Watchers

Forkers

rvion itsmapleleaf glideapps maurimura macalinao ewaly peter-sidra

vscode-tailwindcss-twin's Issues

Add source action for converting `tw` ↔ `css` attribute syntax

gm @lightyen, i've seen that you stop actively working on this plugin (which is fine, what you've already built here is amazing!)

i was thinking about doing a pr about the issue i'm going to describe here, but i first wanted to hear your opinion. and maybe you can point me to some docs about how to add a "source action" to a vscode extension (never done that before and didn't find it after a quick googling.

the problem: i often find myself changing the syntax from something like …

<div tw="text-white">

to this …

<div css={[
  tw`text-white`,
  // isError && tw`text-red-500`
]}>

to be able to do conditional style changes (see the example in the comment).

this conversion, though, is very tedious (many special characters involved etc.), and sometimes i even need to go back and forth, which makes this even more unbearable.

the (potential) solution: adding a source action with this plugin that allows me to convert one syntax to the other and vice-versa quickly.

what do you think?

Support for tailwindcss plugins

packages

tailwindcss: "^2.1.2"
twin.macro: "^2.4.2"
@tailwindcss/forms: "^0.3.2"

tailwind.config.js

module.exports = {
    // ...
    plugins: [
        require('@tailwindcss/forms')({
            strategy: 'class',
        }),
    ],
};

issue

Show pixel <-> rem conversion

Hey there. Thanks for this awesome extension. It's been very useful.

One really nice feature from tailwindcss' vscode extension is that is shows the equivalent pixel value for a given rem.

For example:

Do you think that is a possibility?

Thanks again.

Abitrary variants support

👋 Thank you very much for all the hard work you've done on this extension.

It was (just) released, but figured I'd add a note here about the new arbitrary value support in twin.macro 2.8.0 https://github.com/ben-rogerson/twin.macro/releases/tag/2.8.0

Currently this extension lists that particular syntax as invalid.

Warning: [border-] is duplicated on property: [divide-]

The following code presents a warning message, because both border-gray-200 and divide-gray-200 reference the border-color property behind the scenes.

const Card = tw.div`
  border
  border-gray-200
  divide-y
  divide-gray-200
`;

However they reference different elements. The border-gray-200 class references the current element, and divide-gray-200 reference child elements. So both should work together.

VS Code Version: 1.62.0
Extension Version: v.0.11.6

Support babel plugin twin

Hi, first thanks for the great plugin, so useful!

Twin.macro just released a babel plugin that make the import "twin.macro" not mandatory anymore.
However, auto-completion from this plugin doesn't work when we remove this import line.

Is there a way for those 2 plugins to be compatible?

Thanks!

"import { default as tw }" syntax does not trigger hover information

release on https://marketplace.visualstudio.com/ ?

Hi ! Thanks a lot for starting a new extension dedicated to react and twin.macro. I was about to start mine when I discovered your work. I linked your repository at the bottom of your previous PR

Do you plan to release this on vscode store ?

https://marketplace.visualstudio.com/

x is conflicted on property: y

Hello everyone and thanks for this extension :)
It's unclear to me what's happening here in this example and I need all these 3 classes to achieve what I intend to.

Do you know what's going on?

How to format on save (like it works with all styled.<tag> functions)?

I may be missing something really obvious but is there a way to make vscode auto format the template string as css just like it does with styled-components or @emotion/styled?

I'm getting syntax highlighting and auto completion and I have vscode-styled-components extension installed as well.

Error when using camelCase in short css

Twin.macro have this short css feature (introduced with 2.2.0. It lets you add css like this:

tw="backgroundColor[red]" (since 2.2.0)
tw="background-color[red]" (since 2.2.1)

However, when using option 1, it shows me an error (and it's working same as with option 2)

Could it not show the error in case we want to use option 1?

Code completion just stopped working! 😬

Bad news, I'm not sure if it was a VS Code update in the last few days or one of the extensions, but tailwind strings are no longer code hinting.

I also reported this to Ben at twin since I don't know what broke. This will slow our workflow considerably. What can we do to help figure this out?

Thanks!

Yarn 2 PnP compatibility broken from v0.11.7 onwards

Thanks for creating this useful extension. I typically use Yarn 2's PnP feature for my projects. Recently, I've noticed that from v0.11.7 onwards, when falling back to tailwindcss/defaultConfig, I receive the following error:

[3/24/2022, 1:02:33 PM] [error] Error: The locator that owns the "/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/node_modules/lodash/cloneDeep.js" path can't be found inside the dependency tree (this is probably an internal error)
    at makeError (/home/user/Documents/Projects/project/.pnp.cjs:12887:34)
    at applyNodeExportsResolution (/home/user/Documents/Projects/project/.pnp.cjs:13496:13)
    at resolveUnqualifiedExport (/home/user/Documents/Projects/project/.pnp.cjs:13841:35)
    at resolveRequest (/home/user/Documents/Projects/project/.pnp.cjs:13898:101)
    at Object.resolveRequest (/home/user/Documents/Projects/project/.pnp.cjs:13955:26)
    at requireModule (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\common\module.ts:70:20)
    at Module.C.Q.require (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\common\module.ts:186:10)
    at h (/opt/vscode/resources/app/out/vs/loader.js:4:699)
    at Object.<anonymous> (<anonymous>:2:19)
    at Module.u._compile (/opt/vscode/resources/app/out/vs/loader.js:4:1313)
    at requireModuleFromCode (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\common\module.ts:189:11)
    at Object.f [as importFrom] (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\common\module.ts:288:6)
    at Object.readTailwindConfig (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\service\tailwind\index.ts:1:38)
    at start (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\service\index.ts:116:10)
    at wait (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\service\index.ts:268:19)
    at onDocumentColors (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\service\index.ts:239:10)
    at Object.provideDocumentColors (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\service\index.ts:65:11)
    at Object.provideDocumentColors (/home/user/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.12.2/dist/C:\Users\lightyen\vscode-tailwindcss-twin\src\client.ts:167:37)
    at Q.provideColors (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:85:112148)
    at /opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:85:129326
    at be._withAdapter (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:85:116655)
    at be.$provideDocumentColors (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:85:129304)
    at n._doInvokeHandler (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:89:13812)
    at n._invokeHandler (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:89:13496)
    at n._receiveRequest (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:89:12107)
    at n._receiveOneMessage (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:89:10836)
    at /opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:89:8945
    at d.invoke (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:145)
    at w.fire (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:1856)
    at c.fire (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:19017)
    at /opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:34267
    at d.invoke (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:145)
    at w.fire (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:1856)
    at c.fire (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:19017)
    at s._receiveMessage (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:23598)
    at /opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:21132
    at d.invoke (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:145)
    at w.fire (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:58:1856)
    at w.acceptChunk (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:15848)
    at /opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:66:14978
    at Socket.P (/opt/vscode/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:13790)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

Switching back to v0.11.6 of the extension, the default config loads fine and the extension works as expected. Looking at the extension changelog, in v0.11.7 some yarn 2 enhancement was added. Could that have broken something?

Interestingly, if I create a empty tailwind.config.js that contains only module.exports = {}, the extension loads normally.

Syntax is not highlighted properly

I am using One Dark Pro as recommended in settings however inside tw is not highlighted properly, it is just plain white. Is there any recommendation how to fix that?

Failed to load tailwind.config.js

Hei - Thanks for your work so far! I have just tried it and it works great out of the box. However, I noticed an issue when the custom tailwind.config.js file includes external imports and the plugin fails to resolve them. For example, I have a custom plugin (local) and my config file looks like this:

const defaultTheme = require("tailwindcss/defaultTheme");
const myPlugin = require("./tailwind.plugin.custom.js");

module.exports = {/* ... */}

The TW plugin outputs

reload: /home/oskar/dev/next/tailwind.config.js
[Error] resolving config:
Error: Cannot find module './tailwind.plugin.spacing.js'

It works fine when I use an absolute path, which suggests the plugin tries to resolve paths relative to its install dir instead of the project root(?)

Intellisence not working

I have a problem with intellisence in v0.8.1

Specify config location

Would it be possible to add a configuration setting so that the location of the Tailwind configuration can be customized?

Getting error on startup

Thanks for building/supporting this extension btw.

I'm now getting this error when starting up with the extension installed.

(node:41563) UnhandledPromiseRejectionWarning: TypeError: getProcessedPlugins is not a function
    at /home/rozar/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.9.2/node_modules/tailwindcss/lib/processTailwindFeatures.js:83:83
    at LazyResult.runOnRoot (/home/rozar/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.9.2/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/home/rozar/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.9.2/node_modules/postcss/lib/lazy-result.js:391:26)
    at LazyResult.async (/home/rozar/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.9.2/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/home/rozar/.vscode/extensions/lightyen.tailwindcss-intellisense-twin-0.9.2/node_modules/postcss/lib/lazy-result.js:206:17)
    ```

Update title

Just trying out your extension and noticed the title hasn't been updated yet:

vscode-tailwindcss-twin/package.json

Line 3 in ce82804

"displayName": "Tailwind CSS IntelliSense",

Also, is it possible to disable the links on the classes?

Add support for className attribute

Hello,

if not already working and since twin.macro is also allowing this options, i think it would be nice if the suggestions worked inside the className attribute, too

Errors when using variants and grid-template with names in short css syntax

Some recreations here and working alternatives for contrast:

It's worth to say that similar code didn't report errors at all until version 0.9.0, so I'm guessing it has something to do with twin's latest JIT release introducing alternative syntax? Anyways, felt like I should report this.

Color highlighting lost when using dot notation components

add background cyan color decoration

twrnc Support

Any chance support for https://www.npmjs.com/package/twrnc can be added? it is pretty much the same but for React Native

Doubled suggestions when using within a vscode-workspace

When I open a vscode workspace of a monorepo (project.code-workspace) file it successfully locates my config (packages/frontend/tailwind.config.js) but all suggestions are shown twice. If I open the same monorepo just by its folder the suggestions are back to normal.

Sample project.code-workspace:

{
  "folders": [
    {
      "name": "_ROOT",
      "path": "../"
    },
    {
      "name": "Frontend",
      "path": "../packages/frontend"
    }
  ],
  "settings": {
    "files.exclude": {
      "**/node_modules/": true,
      "**/package-lock.json": true,
      "**/yarn.lock": true,
      "**/yarn-error.log": true,
      "**/.yarn": true,
    },
  }
}

Little tip: When you open a code-workspace-file in VSCode a button in the lower right appears where you can switch to workspace-mode :)

PS: I also tried with v3.0.0

release on https://open-vsx.org/ ?

Hi again, I'm trying to setup a web-based vscode instance.

Most web-based vscode variants (A, B, C, ...) are converging on https://open-vsx.org/ for their extension store

Could you also release it on this store ?

( just found this issue on code-server btw, your extension is one of the few that was already requested )

Lagged cursor movement

Hey there
@locona seems to be getting some lag while the extension is active, any ideas?

Here’s a post from the discussion

The reason why I don't use extention is that every time I make a typo, completion runs and slows things down.

As shown in the GIF below, the cursor movement will be heavy.

I've never done any extension development, so I don't know how to identify the cause.
I hope you can help me.

Tailwind V3 feedback

I am going to do some changes about tailwind v3 on the branch util twin v3 release.

If you have any requests, questions or something else, comment below.

~~Download the preview version to try v3 features.~~

2022/06/10 Update:
~~New prerelease version is published, download link~~

2022/06/15 Update:
~~New prerelease version is published, download link~~

2022/06/16 Update:
~~New prerelease version is published, download link~~

2022/06/25 Update:
~~New prerelease version is published, download ver. 3.0.0-rc.4~~

2022/07/26 Update:

~~New prerelease version is published, download ver. 3.0.0-rc.5~~

2022/09/01 Update:
~~New prerelease version is published, download ver. 3.0.0-rc.6~~

Change the color highlight

First of all, thank you so much for making this plug in. I really love it!

Can we though add a little color to the syntax highlight? is that possible?

What I mean is:

and

Notice how in styled components highlight we have the font-size is highlight as blue (default color for variables) and ` is highlighted as orange (default color for quotes).

Maybe do the same for tailwind? any class name would be blue like variables? I see the green for sm so that is already great.

Let me know what you think. Thanks.

Support for twin.macro 2.5.0

Hello, first, thanks for this awesome extension.
Second: is there any plan to support the latest release of twin.macro, 2.5.0?

Styles not showing next to suggested className

currently when typing classNames the styles do not show . The plugin is using default settings as installed:

as documented in how the plugin should work:

how do I use extension without importing twin.macro?

I use babel-plugin-twin to automatically add the tw prop from twin.macro.
Because I deduct import statement , extension is setted unactive. How do I solve it??

Variant grouping not working as expected

👋 I noticed variant grouping support was part of the featureset, but am unable to get either the auto-completion or the hover previews to work.

Works:

hover:shadow-md hover:brightness-105

Doesn't work:

hover:(shadow-md brightness-105)

The styles are still generated on the frontend fine, but the editor doesn't seem to like this. Any tips on what might be up? Thanks for creating this BTW!

Intellisense stopped working with a UnhandledPromiseRejectionWarning

This extension worked fine until last night, but today morning, when I try to use it, it doesn't give me Intellisense anymore.
Instead, I get the following in the debug console

UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at flattenColorPalette (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\util\flattenColorPalette.js:8:67)
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\plugins\caretColor.js:27:48
    at registerPlugins (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:487:7)
    at createContext (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:530:3)
    at getContext (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:591:17)
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupTrackingContext.js:177:57
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\processTailwindFeatures.js:54:7
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\index.js:25:56
    at LazyResult.runOnRoot (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\postcss\lib\lazy-result.js:339:16)
(Use `Code --trace-warnings ...` to show where the warning was created)
(node:12464) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:12464) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Option: `separator` forced to be set ':'.
(node:12464) UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at flattenColorPalette (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\util\flattenColorPalette.js:8:67)
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\plugins\caretColor.js:27:48
    at registerPlugins (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:487:7)
    at createContext (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:530:3)
    at getContext (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupContextUtils.js:591:17)
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\lib\setupTrackingContext.js:177:57
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\processTailwindFeatures.js:54:7
    at c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\tailwindcss\lib\jit\index.js:25:56
    at LazyResult.runOnRoot (c:\Users\dave\.vscode\extensions\lightyen.tailwindcss-intellisense-twin-0.9.0\node_modules\postcss\lib\lazy-result.js:339:16)
(node:12464) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

Any idea how I can get this fixed?

Dark mode suggestion text based on tailwind.config.js

When using the dark: modifier, I noticed the suggestion text refers to @media (prefers-color-scheme: dark) no matter if you have the darkMode option set to "class" in tailwind.config.js.

It looks like this might be coming from

vscode-tailwindcss-twin/server/tailwind/twin.ts

Line 10 in f80af54

["dark", ["@media (prefers-color-scheme: dark)"]],

Is there a common utility for pulling in the Tailwind config we could use to adjust the verbiage?

Possible to disable color decoration?

Hi, is it possible to disable the color decoration feature?

If not, could you add it as an option? Thanks

many unnecessary duplicate warnings

Hey,
since your recent extension update i get warnings like this everywhere in my workspace:

I think all of them are too strict as for example I must be able to set bg-opacity as well as bg-color in one stylesheet.

When I downgrade to 0.10.4 all those warnings are gone and everything is fine again.

Can you reproduce that behavior?

Thanks in advance. I really love the work you are doing with this plugin.

Add a side-feature for finding the class by rule

Hey! I don't see a reason why don't we add a command for searching class names by typing a rule that it uses. I think QuickPick will be okay for the first time.
Example: I type letter-spacing and get tracking-tighter classes in search.
I think it would be a great way to make the ecosystem of the extension more complete.
Also this will be extremely useful for beginners.

Text Align like text-start text-end isn't decorated

please ignore I've installed new prerelease version that have a decoration of this utility