Formatting in brackets

[jannahalka]

Hello, I would like to ask a question. The formatting works perfectly when I don't have quotes surrounded by brackets but as soon as I surround them with brackets formatting no longer works.

className="flex text-xl ..." -> works className={"flex text-xl ..."} -> doesn't work

So my question is if the behavior is intentional or am I doing something wrong. Thanks

[WalrusSoup]

This is for react, correct? Can you attach a few files so I can write some tests?

[fsbtmo]

Hey there, it would also come in handy for .twig files. Where you do stuff like

{{ svg('@webroot/dist/svg/icon.svg')|attr({class: 'text-red xl:w-4 h-4'}) }}

or not so pretty but sometimes needed ..

<div class="{{ module.alignment == 'left' ? 'md:ml-10 xl:ml-24 p-4' : 'md:mr-10 xl:mr-24 p-4' }}">...</div>

[7ammer]

I'm working on a react native project that uses this format when adding tailwind:

<View style={tw`p-4 android:pt-2 bg-white dark:bg-black`}>
    <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>
  </View>

There is a phpstorm configuration file found in settings > languages & frameworks > styles sheets > taiwind css.

In that config file I've added the below which allows phpstorm to do tailwind hinting based on the defined regex:

...
    "experimental": {
        "configFile": null,
        "classRegex": [
            "tw`([^`]*)",
            ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
        ]
    }

Perhaps classRegex could be used to define what can be formatted.